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


/* !Media Queries ============================== */
nav a#mn_close,
a#mn_open { display: none; }
/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 1130px) {
	
	#main,
	#footer .events {
		font-size: 14px;
	}
	
	nav ul {
		margin: 0 auto;
		width: 96%;
		
		text-align: center;
	}	
	nav ul li a {
		font-size: 0.85em;
		padding: 0 6px;
	}
	
	header .quicklinks_header_1:before {
		width: 20%; 
	}
	
	header .quicklinks_header_1 li {
		width: auto;
	}
	
	header .quicklinks_header_1 a {
		font-size: 1em;
	}
	
	footer .events li,
	footer .events li:last-child {
		margin-right: 0;
		width: 100%;
	}
	
	footer .events li p {
		margin: 0 0 10px 0; 
	}
	
	footer .events li a {
		font-size: 01em;
	}
	
	footer .quicklinks .container {
		background-size: auto 60px;
	}
	
	footer .navigation .footer_nav_1 {
		width: 100%;
	}
	
	footer .navigation .footer_nav_1 > li {
		max-width: none;
		width: 30%;
		padding-bottom: 3em;
	}
	
	footer .navigation .footer_nav_1 > li:nth-child(3n) {
		clear: both;
	}
	
}

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}

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

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

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 481px) and (max-width: 767px) {
	#header #access-button {
		display: none;
	}
	a#mn_open {
		display: block;
		position: absolute;
		z-index: 9999;
		top: 5px;
		left: 5px;
		width: 30px;
		height: 30px;
		padding: 0;
		border: 2px solid #6da0c5;
		background: url("../../img/icon-menu.png") no-repeat center center;
		text-indent: -9999em;
	}
	nav#navigation {
		display: none;
		position: absolute;
		z-index: 10000;
		top: 0;
		left: 0;
		width: 100%;
	}
		nav#navigation a#mn_close {
			display: block;
			position: relative;
			clear: both;
			padding: 5px;
		}
		nav#navigation ul.nav_1 {
			display: block;
			position: relative;
			float: left;
			width: 100%;
			padding: 0;
			margin: 0;
		}
			nav#navigation ul.nav_1 li {
				display: block;
				position: relative;
				float: left;
				width: 100%;
				padding: 0;
				margin: 0;
			}
			nav#navigation ul.nav_1 > li > ul {
				display: block;
				position: relative;
			}
	footer .navigation ul.footer_nav_1 > li {
		width: 48%;
		margin: 0;
	}
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 480px) {
	header#header h1 .logo { width: 100%; }
	body.main header#header #access-button { top: -180px; right: 0; }
	body.main.info header#header #access-button { top: -195px; }
	body.members header#header #access-button { top: -195px; }
	body.main header#header p.language-toggle { top: -200px; right: -5px; }
	body.main.info header#header p.language-toggle { top: -215px; }
	body.members p.language-toggle { top: -215px; }
	header#header .quicklinks_header_1 { margin: 15px 0 0 0; }
	header#header .quicklinks_header_1:before { width: 100%; margin-bottom: 0.5em; }
	header#header .members_header_1 { margin: 15px 0 0 0; }
	header#header .members_header_1:before { width: 100%; margin-bottom: 0.5em; }
	header#header .members_header_1 li { width: 100%; margin: 0; }
	a#mn_open {
		display: block;
		position: absolute;
		z-index: 9999;
		top: 15px;
		left: 15px;
		width: 30px;
		height: 30px;
		padding: 0;
		border: 2px solid #6da0c5;
		background: url("../../img/icon-menu.png") no-repeat center center;
		text-indent: -9999em;
	}
	nav#navigation {
		display: none;
		position: absolute;
		z-index: 10000;
		top: 0;
		left: 0;
		width: 100%;
	}
		nav#navigation a#mn_close {
			display: block;
			position: relative;
			clear: both;
			padding: 5px;
		}
		nav#navigation ul.nav_1 {
			display: block;
			position: relative;
			float: left;
			width: 100%;
			padding: 0;
			margin: 0;
		}
			nav#navigation ul.nav_1 li {
				display: block;
				position: relative;
				float: left;
				width: 100%;
				padding: 0;
				margin: 0;
			}
			nav#navigation ul.nav_1 > li > ul {
				display: block;
				position: relative;
			}
	#main .container .c2 {
		width: 100%;
		margin: 0;
	}
	#main .bank-status-indicator {
		padding-top: 15px;
		padding-left: 70px;
		margin-top: 15px;
	}
		#main .bank-status-indicator i.icon {
			top: 15px;
			width: 55px;
			height: 55px;
			font-size: 35px;
			line-height: 55px;
		}
		#main #progress_bar ul li { text-align: center; }
	#footer .quicklinks { padding: 25px 0; }
	#footer .quicklinks .container {
		background-position: left top;
	}
	#footer .quicklinks ul.quicklinks_nav_1 {
		display: block;
		position: relative;
		float: left;
		width: 100%;
		margin: 65px 0 0 0;
		font-size: 0.8em;
	}
	#footer .quicklinks ul.quicklinks_nav_1 li { margin-right: 1%; }
	#footer .navigation { display: none; }
	#footer .copyright { padding-top: 15px; }
	#footer .copyright ul.info_nav_1 li a { margin-right: 5px; }
	
	
	
	
	header .login-nav,
	header .login-form,
	header .search-form  {
		margin: 0 0 20px 0;
	}
	table { display: block; width: 100%; }
		table th, table td { font-size: 0.8em; line-height: 1.2em; padding: 0.5em; vertical-align: top; }
		table td a.button { text-align: center; }
	img { width: 100%; height: auto; }
}