/*------------------------------------------------------------------------
# Soapbox -> Style CSS (v2.3.0) : RESPONSIVE
# ------------------------------------------------------------------------
# Copyright (C) 2012 PICNet, Inc. All Rights Reserved.
# Author: Ryan Belisle
# Website:  http://www.picnet.net
-------------------------------------------------------------------------*/

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

img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

.menu-bar {
	cursor: pointer;
	display: none;
	height: 17px;
	width: 24px;
	position: absolute;
	right: 0;
	top: 50%;
	margin-top: -9px;
}

.menu-bar .icon-bar {
    position: absolute;
    height: 3px;
    width: 24px;
    top: 0;
    right: 0;
    opacity: 1;
    margin: 0;
    background-color: #fff;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}

.menu-bar .icon-bar:nth-child(2) {
	top: 7px;
}

.menu-bar .icon-bar:nth-child(3) {
	top: 14px;
}

.menu-bar.open .icon-bar:nth-child(1) {
    top: 8px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
}

.menu-bar.open .icon-bar:nth-child(2) {
    display: none;
}

.menu-bar.open .icon-bar:nth-child(3) {
    top: 8px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
}

/* ------------------------------------------------------------------------
/* !MEDIA QUERIES > Template */
/* ----------------------------------------------------------------------*/

@media only screen and (min-width:768px) and (max-width:960px) {
	#wrapper {
		padding-left: 15px;
		padding-right: 15px;
		width: auto;
	}
	
	#col2 {
		float: none;
		margin-left: 165px;
		width: auto;
	}
	
	header ul.menuhorz li {
		margin-right: 60px;
	}
	
	.footerLeft, .footerRight {
		width: 50%;
	}
	
	.mod-event .col-event-left {
		width: 190px;
	}
	
	.mod-event .col-event-right {
		margin-left: 210px;
	}
	
	.mod-event .event-more {
		margin-left: 0;
	}
}

@media only screen and (min-width:768px) {
	#col2 header {
		display: block !important;
	}
}

@media (max-width: 767px) {
	#wrapper {
		margin-top: 30px;
		padding-left: 15px;
		padding-right: 15px;
		width: auto;
	}
	
	#col1, #col2 {
		float: none;
		width: auto;
	}
	
	#col1 {
		margin: 0 0 20px;
	}
	
	a#logo {
		height: auto;
		position: static;
	}
	
	a#logo img {
		width: 75px;
	}
	
	header ul.menuhorz {
		height: auto;
	}
	
	header ul.menuhorz li {
		display: block;
		margin-right: 0;
	}
	
	.article-content h4:first-child {
		margin-top: 0;
	}
	
	.mod-event .col-event-left {
		float: none;
		width: auto;
	}
	
	.mod-event .col-event-right {
		clear: both;
		margin-left: 0;
	}
	
	.mod-event .event-more {
		margin-left: 0;
	}
	
	.footerLeft, .footerRight {
		float: none;
		width: auto;
	}
	
	.component-title {
		padding-top: 15px;
	}
	
	.menu-bar {
		display: block;
	}
	
	#col2 header {
		display: none;
	}
	
	ul.menuhorz li ul {
		position: static;
	}
	
	ul.menuhorz li.toggle-open ul {
		display: block;
		opacity: 1;
		width: auto;
		visibility: visible;
	}
}

@media (max-width: 480px) {
	.mod-event .event-title {
		font-size: 32px;
	}
	
	.article-title h2.contentheading, #page h1.componentheading {
		font-size: 32px;
		padding-right: 0;
	}
	
	table.blog .article-content img.img-left {
		float: none;
		display: block;
	}
	
	select.inputbox, select.select {
		max-width: 100%;
	}
}