/*
	(c)2012 - visuallizard.com
	
	Mobile styles using Media Queries
*/


@media only screen and (min-width: 300px) and (max-width: 960px) {
	#mobi-nav {
		display: block;
		position: relative;
		float: right;
		height: 121px;
		padding: 0;
		margin: 5px 5% 0 0;
		font-size: 14px;
		font-weight: bold;
		text-align: center;
		text-decoration: none;
	}
		#mobi-nav a {
			display: block;
			position: relative;
			width: 95%;
			padding: 9px 0 10px 5%;
			margin-top: 2px;
			text-align: left;
			text-decoration: none;
			background: #ea0e02;
			color: #fff;
		}
		#mobi-nav a:first-of-type { margin: 0; }
		#mobi-nav a:hover,
		#mobi-nav a.at {
			text-decoration: underline;
		}
	
	
	
	
	.container {
		clear: both;
		width: 100%;
	}
	
	#cover-tools {
		display: block;
		position: relative;
		width: 100%;
		height: auto;
		float: left;
	}
		#cover-tools .container {
			height: auto;
		}
		#cover-tools ul.cover-nav {
			width: 90%;
			height: 20px;
			margin: 0 5%;
		}
			#cover-tools ul.cover-nav li {
				display: none;
			}
			#cover-tools ul.cover-nav li#accessibility,
			#cover-tools ul.cover-nav li#contact-us,
			#cover-tools ul.cover-nav li#update-info {
				display: block;
			}
			#cover-tools ul.cover-nav li#accessibility {
				margin-left: -10px;
			}
		#cover-tools a#search-toggle {
			display: block;
			position: absolute;
			width: 20px;
			height: 20px;
			right: 5%;
			bottom: 5px;
			border-radius: 3px;
			background: #fff url("../../img/search-toggle.png") no-repeat center center;
		}
		#cover-tools form.search {
			display: block;
			position: relative;
			height: 20px;
			float: none;
			width: 90%;
			padding: 5px 5%;
			margin: 0 5px 5px 0;
			display: none;
		}
			#cover-tools form.search input[type="text"] {
				display: block;
				position: relative;
				float: left;
				width: 80%;
				padding: 0 15% 0 5%;
				border: 1px solid #305c83;
				-moz-border-radius: 10px;
				border-radius: 10px;
				box-shadow: 0 0 3px #000;
				margin: 0;
				background: #d2dee6;
				background: #fff;
				font-size: 16px;
				line-height: 20px;
			}
			#cover-tools form.search input[type="submit"] {
				display: block;
				position: relative;
				float: right;
				z-index: 1;
				width: 20px;
				height: 20px;
				padding: 0;
				border: none;
				-moz-border-radius: 10px;
				border-radius: 10px;
				margin: -25px 0 0 0;
				background: none;
				color: #000;
				/* background: url("../../img/icon-search.png") no-repeat 5px 3px; */
				font-size: 10px;
				line-height: 20px;
				text-indent: 0;
				text-transform: uppercase;
				cursor: pointer;
			}
			
			
	#header {
		display: block;
		position: relative;
		float: left;
		width: 100%;
		min-height: 100%;
		margin-top: 0;
	}
		#header h1 {
			display: block;
			position: relative;
			float: left;
			width: 120px;
			min-height: 130px;
			padding: 0;
			margin: 5px 0 0 5%;
		}
			#header h1 a.logo {
				display: block;
				position: absolute;
				width: 100%;
				min-height: 100%;
				padding: 0;
				margin: 0;
			}
				#header h1 a.logo img {
					width: 120px;
					height: 120px;
					padding: 0;
					margin: 0;
				}
		#header #banner-block {
			display: none;
		}
	#sidebar {
		display: none;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1000;
		clear: both;
		float: left;
		width: 100%;
		padding: 0;
		background: #fff;
		box-shadow: 0 5px 10px #000;
		line-height: 0;
	}
		#sidebar ul.nav_1 li {
			margin-bottom: 0;
		}
			#sidebar ul.nav_1 li > a {
				display: none;
			}
			#sidebar ul.nav_1 li.at ul li a {
				padding: 10px;
			}
			#sidebar ul.nav_1 li.at ul {
				display: block;
				position: relative;
				padding: 0;
				margin: 0;
				list-style: none;
				font-size: 0.85em;
			}
				#sidebar ul.nav_1 li.at ul li {
					display: block;
					position: relative;
					margin: 0;
				}
					#sidebar ul.nav_1 li.at ul li a {
						display: block;
						position: relative;
						height: auto;
						line-height: 1em;
						text-transform: none;
						-moz-box-shadow: none;
						box-shadow: none;
					}
					#sidebar ul.nav_1 li.at ul li.at a {
						
					}
					#sidebar ul.nav_1 li.at ul li.at > a:after { top: 7px; }
				#sidebar ul.nav_1 li.at ul li ul {
					display: block;
					font-size: inherit;				}
					#sidebar ul.nav_1 li.at ul li ul li a {
						display: block;
						position: relative;
						padding-left: 30px;
						line-height: 1em;
						background: #c7d7e4;
						color: #000;
					}
					#sidebar ul.nav_1 li.at ul li ul li.at a {
						
					}
					#sidebar ul.nav_1 li.at ul li.at ul li.at > a:after { top: 7px; }
				#sidebar ul.nav_1 li.at ul li ul li ul {
					display: block;
					font-size: inherit;
				}
					#sidebar ul.nav_1 li.at ul li ul li ul li a  {
						display: block;
						position: relative;
						padding-left: 45px;
						line-height: 1em;
						background: #eaf5fb;
						color: #000;
					}
					#sidebar ul.nav_1 li.at ul li ul li ul li.at a {
						
					}
					#sidebar ul.nav_1 li.at ul li.at ul li.at ul li.at > a:after { top: 7px; }
			
			
			
	/* !navigation toggles */
	#sidebar ul.nav_1 li ul {
		display: none;
	}
	#sidebar.about ul.nav_1 li#nav_li_item_127.at ul {
		display: block !important;
	}
	#sidebar.members ul.nav_1 li#nav_li_item_129.at ul {
		display: block !important;
	}
	#sidebar.news ul.nav_1 li#nav_li_item_133.at ul {
		display: block !important;
	}
	
		#sidebar a#activists-login {
			display: none;
		}
	/* !hidden navigation */
	#sidebar ul.nav_2 li#nav_li_item_195 {
		display: none;
	}
	/* !main content */
	#main {
		display: block;
		position: relative;
		clear: both;
		float: left;
		width: 90%;
		min-height: 400px;
		margin: 0 5%;
	}
		#main #features {
			clear: both;
			width: 100%;
		}
		#main #home-news {
			display: none;
		}
		#main ul#quicklinks {
			display: none;
		}
		#main.home ul#quicklinks {
			display: block;
			position: relative;
			float: right;
			width: 100%;
			height: 100%;
			padding: 0;
			margin: 0 0 15px 0;
			list-style: none;
			text-transform: uppercase;
			font-family: "myriad-pro-condensed", sans-serif;
			font-size: 1.3em;
			font-weight: 700;
		}
/*
		#main.home ul#quicklinks {
			position: absolute;
			top: 150px;
		}
*/
			ul#quicklinks li {
				display: block;
				position: relative;
				float: left;
				width: 100%;
				height: auto;
				padding: 0;
				border-bottom: 1px solid #fff;
				margin: 0;
			}
			ul#quicklinks li:hover {
				box-shadow: none;
			}
			
			ul#quicklinks li#findlocal { background: none; }
			ul#quicklinks li#orientation { background: none; }
			ul#quicklinks li#bargaining { background: none; }
			ul#quicklinks li#discounts { background: none; }
			ul#quicklinks li#calendar { background: none; }
			ul#quicklinks li#news,
			ul#quicklinks li#thesource { display: block; }
				ul#quicklinks li a {
					display: block;
					position: relative;
					width: 90%;
					height: auto;
					padding: 8px 5%;
					margin: 0;
					line-height: 1.1em;
					text-decoration: none;
					background: #305c83 url("../../img/quicklink-arrow.png?123") no-repeat right center;
					color: #fff;
				}
				ul#quicklinks li#thesource a { background-color: #d2dee6; color: #000; }
				ul#quicklinks li:hover a {
					color: #ea0e02;
				}
		#main #document-filter {
			display: block;
			position: relative;
			width: 100%;
		}
		#main .c1,
		#main .c2,
		#main .c2.first,
		#main .c3 {
			display: block;
			position: relative;
			clear: both;
			float: left;
			width: 90%;
			margin: 0 5%;
			padding: 0;
			background: #fff;
		}
			#main .c2 {
				width: 90%;
				padding: 5%;
				margin: 0;
				background: #edf2f6;
			}
			#main .c1 img,
			#main .c2 img,
			#main .c3 img {
				display: block;
				position: relative;
				float: none;
				width: 100%;
			}
		
	/* !staff profile styles */
	#main .staff-profile {
		display: block;
		position: relative;
		width: 100%;
	}
		#main .staff-profile img {
			width: 55%;
			float: left;
			margin: 0 0 1em 0;
		}
		#main .staff-profile div { width: 100%; }
	#main .staff-listing {
		display: block;
		position: relative;
		width: 100%;
	}
		#main .staff-listing li { height: auto; }
		#main .staff-listing li:nth-of-type(2n+1) {
			clear: both;
			float: left;
			box-sizing: border-box;
			width: 49%;
			margin: 0 0 5px 0;
		}
		#main .staff-listing li:nth-of-type(2n) {
			float: right;
			box-sizing: border-box;
			width: 49%;
			margin: 0 0 5px 0;
		}
		ul.staff-listing li a { width: 100%; height: auto; }
		ul.staff-listing li a img { width: 100%; height: auto; }
	/* !pagination styles */
	.pagination {
		display: block;
		position: relative;
		float: left;
		width: 100%;
		margin-bottom: 15px;
	}
		.pagination ul {
			display: block;
			position: relative;
			float: left;
			width: 100%;
			margin: 0;
			border: none;
		}
			.pagination ul li a {
				padding: 0 8px;
			}
			.pagination ul li.current,
			.pagination ul li a:hover {
				background: #d2dee6;
				padding: 0 7px;
			}
	/* !discount and local form styles */
	#main form {
		width: 100%;
		padding: 0;
		margin: 0;
	}
		#main form fieldset {
			width: 90%;
			min-height: 90px;
			padding: 5%;
			margin: 0;
		}
		#main form #not-mobile-map {
			display: none;
		}
	/* !locals form styles */
	#main form#union_search {
		
	}
		#main form#union_search div h3 {
			
		}
		#main form#union_search div ul {
			clear: both;
		}
			#main form#union_search div ul li {
				margin: 0 0 5px 0;
			}
	/* !discount coupon styles */
	#main .results {
		display: block;
		position: relative;
		width: 100%;
		padding: 0;
		margin: 0;
	}
	#main .results .coupon,
	#main .coupon.display {
		display: block;
		position: relative;
		width: 90%;
		padding: 5%;
		margin: 0 0 5px 0;
	}
		#main .results .coupon h3,
		#main .coupon.display h3 {
			width: 100%;
			font-size: 1.6em;
			float: none;
		}
		#main .results .coupon img,
		#main .coupon.display img {
			display: block;
			float: none;
			width: 80%;
			padding: 0;
			margin: 5px 10%;
		}
		#main .results .coupon .coupon-description,
		#main .coupon.display .coupon-description {
			display: block;
			position: relative;
			float: none;
			width: 100%;
		}
		#main .results .coupon p.expires,
		#main .coupon.display p.expires {
			width: 100%;
		}
		#main .results .coupon a.single {
			display: block;
			position: relative;
			float: none;
			width: 70px;
		}
		#main .coupon.display a.single {
			display: none;
		}
	/* !standard form styles */
	#main form.standard {
		display: block;
		position: relative;
		clear: both;
		float: left;
		width: 94%;
		padding: 3%;
		margin: 0;
		background: #eee;
	}
	/* !events styles */
	/* #main ul#category-legend { display: none; } */
	#main .calendar-container { display: none !important; }
	#main div.daily-list.hidden-js { display: block !important; clear: both; }
	#main div.daily-list.hidden-js h3 {
		display: block;
		margin: 5px 10px;
	}
	
	/* !video styles */
	#main iframe.internal-video {
		width: 100%;
		height: 230px;
	}
	#main ul.video-group {
		display: block;
		position: relative;
		float: left;
		width: 100%;
		padding: 0;
		margin: 10px 0;
		list-style: none;
		font-family: "myriad-pro-condensed", sans-serif;
	}
		#main ul.video-group li {
			display: block;
			position: relative;
			float: left;
			width: 60px;
			padding: 0;
			line-height: 0;
			border: 1px solid #6990ae;		
			-moz-border-radius: 5px;
			border-radius: 5px;
			margin: 0 5px 5px 0;
		}
			#main ul.video-group li a {
				display: block;
				position: relative;
				padding: 3px 5px;		
				-moz-border-radius: 4px;
				border-radius: 4px;
				margin: 0;
				background: #d2dee6;
				color: #6990ae;
				text-decoration: none;
				text-transform: uppercase;
			}
			#main ul.video-group li:hover a {
				color: #fff;
				background: #6990ae;
			}
			#main ul.video-group li.playing a {
				color: #ea0e02;
			}
	#main .video.feature {
		display: block;
		position: relative;
		clear: both;
		width: 90%;
		padding: 15px;
		margin: 0 0 15px 0;
		background: #d2dee6;
		-moz-border-radius: 10px;
		border-radius: 10px;
	}
		#main .video.feature iframe {
			width: 100%;
			height: 200px;
			-moz-border-radius: 10px;
			border-radius: 10px;
		}
	
	/* !election questionnaire styles */
	.question-set h3 { padding: 3% 3% 10% 3%; }
	.question-set .cke div.c3 { min-height: auto; }
	
	/* !footer styles */
	#footer {
		display: block;
		position: relative;
		clear: both;
		float: left;
		width: 100%;
		margin: 0;
	}
		#footer #foot-left {
			display: block;
			position: relative;
			clear: both;
			width: 90%;
			margin: 0 5%;
		}
		#footer #foot-centre {
			display: block;
			position: relative;
			clear: both;
			width: 90%;
			margin: 0 5%;
		}
			#footer #foot-centre ul.fnav_1 {
				display: none;
			}
		#footer #foot-right {
			display: block;
			position: relative;
			clear: both;
			width: 90%;
			margin: 0 5%;
		}
}

/* !Media Queries ============================== */


/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 960px) and (max-width: 1024px) {
	
}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 768px) {
	
}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 561px) and (max-width: 900px) {
	#mobi-nav {
		width: 68%;
	}
	ul.events-list li.event-item a.close-events { display: none; }
}
/* Mobile Landscape Size (devices and browsers) */
@media only screen and (min-width: 401px) and (max-width: 560px) {
	#mobi-nav {
		width: 58%;
	}
	ul.events-list li a.ical {
		display: block;
		position: absolute;
		top: 5px;
		right: 5px;
		width: 20px;
		height: 40px;
		padding: 0;
		margin: 0;
		background: url("../../img/icon-calendar.png") transparent no-repeat;
		background-size: 20px;
		display: block;
		text-decoration: none;
	}
	ul.events-list li.event-item a.event {
		display: block;
		padding-right: 40px;
	}
	ul.events-list li.event-item a.close-events { display: none; }
}
/* Mobile Portrait Size (devices and browsers) */
@media only screen and (max-width: 520px) {
	#shortcut-message {
		display: block;
		position: fixed;
		box-sizing: border-box;
		z-index: 10;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		height: 100%;
		padding: 3%;
		background: rgba(0,0,0,0.7);
	}
	#shortcut-message.clear { display: none; }
	#shortcut-message .container { box-sizing: border-box; width: 100%; padding: 3%; background: #fff; }
	#shortcut-message h2 { font-size: 22px; line-height: 28px; text-align: center; color: #fff; }
	#shortcut-message h3 { font-size: 20px; line-height: 24px; text-align: center; }
	#shortcut-message ul { display: block; position: relative; color: #000; }
	#shortcut-message .container a { color: #6990ae; }
	#shortcut-message a { display: block; width: 50%; padding: 10px 0; margin: 0 25%; text-transform: uppercase; text-align: center; color: #fff; }
	#shortcut-message a.dismiss { background: #ea0e02; font-weight: 700; text-decoration: none; }
	
	#mobi-nav {
		width: 50%;
	}
	ul.events-list li a.ical {
		display: block;
		position: absolute;
		top: 5px;
		right: 5px;
		width: 20px;
		height: 40px;
		padding: 0;
		margin: 0;
		background: url("../../img/icon-calendar.png") transparent no-repeat;
		background-size: 20px;
		display: block;
		text-decoration: none;
	}
	ul.events-list li.event-item a.event {
		display: block;
		padding-right: 40px;
	}
	ul.events-list li.event-item a.close-events { display: none; }
	
}