/* CSS Document */

/* ==|== media queries ====================================================== */


/* #Large Desktop
================================================== */
    /* Note: Design for a width of 1280px */
    @media only screen and (min-width: 1280px) {
		
	}
		
		
	

		/* #Tablet (Landscape)
================================================== */
    /* Note: Design for a width of 1024px */

    @media only screen and (max-width: 1024px) {

		#arch-nav, #arch-header, #arch-main, #arch-splash, #arch-footer, footer, #arch-copyright {width: 97%; }
		#arch-header nav {width: 100%;}
		#arch-header .logo {width: 25%;}
		#qm0 a {padding: 10px 17px;}

		#arch-main .main-wrapper {padding: 20px;}
		#arch-main .main-video {width: 47%; margin-top: 20px; }
		#arch-main .main-content {width: 50%;}

		#arch-main .main-col {width: 26%; height: 300px;}
		#arch-footer .social {top: -45px; position: relative;} 

		#arch-splash .desc h2 {font-size: 2.3em;}
		#arch-splash .desc h2.single-line {line-height: 1.0em; }
		#arch-splash .desc h2.double-line {line-height: 1.0em; }



	}
		
		
/* #Tablet (Portrait)
================================================== */
    /* Note: Design for a width of 768px */

    @media only screen and (max-width: 800px) {
    	#arch-header .logo {width: 23%; }
		#arch-header .util-pane {width: 66%; }
		#arch-header .util {border: none;}
		#arch-splash .desc h2 {width: 80%;}
    	#arch-header nav {width: 150%;border-top: 1px solid #F4811E;}
    	#qm0 a {padding: 10px 25px;}

    	#arch-main .main-video {width: 100%;float: none;}
    	#arch-main .main-content {width: 100%; float: none;margin-bottom: 20px;} 

    	#arch-main .main-col {width: 24%; height: 405px; }

    	#arch-footer .logo-pane .logo img {width: 100%;max-width: 164px;}
    	#arch-footer .logo-pane .logo {margin-top: 10px; width: 80%; }
    }



	/*  #Mobile (landscape)
================================================== */

    /* Note: Design for a width of 480px */

    @media only screen and (max-width: 480px) {
	
		#arch-header {margin-top: 15px;}
		#arch-header .util-pane {width: 100%;}
		#arch-header .logo {width: 55%; margin: 0 auto; float: none; text-align: center; } 
		#arch-header .util .date-pane {float: none; margin: 0 auto; text-align: center; }
		#arch-header .util .symbol-pane {float: none; text-align: center; margin-top: 5px; }

		#arch-header nav {display: none;}

		#arch-header .arch-dropdown-menu {display:block;clear:both;width: 88%;margin: 20px auto;color: white;background-color: #002033;font-weight: bold;
height: 30px;font-size: 1.3em;}

		#arch-splash .desc {width: 85%; height: 120px;top: 215px; }
		#arch-splash .desc h2 {width: 100%; padding-top: 15px; font-size: 1.9em; }
		.splash-pager {top: 310px; right: 10px;}

		#arch-main .main-wrapper {padding: 10px;}

		#arch-main .main-col {width: auto; height: auto; float: none; margin-bottom: 10px; } 

		.footer-wrapper {background-color: #002033; height: auto;}

		#arch-footer .logo-pane {width: 100%; float: none; margin: 0 auto; text-align: center; }
		#arch-footer .logo-pane .logo {width: 100%;  }

		#arch-footer .links {float: none; text-align: center; width: 90%; color: #fff; margin: 0 auto; margin-top: 20px;}

		#arch-footer .primary {height:auto !important; margin-bottom: 10px;}
		#arch-footer .primary ul {list-style:none; display: block;}
		#arch-footer .primary ul li{display:list-item;border:none;margin-top:3px;float:none;}
		#arch-footer .primary a {font-weight:bold; padding:3px 7px;color:#fff !important;
		 background-color:#0072AB;
		-webkit-border-radius: 5px 5px 5px 5px;
		-moz-border-radius: 5px 5px 5px 5px;
		CCborderRadius: 5px 5px 5px 5px;}
		#arch-footer .primary a:link, .primary a:visited{display:block; font-size:.8em; font-weight:bold; text-decoration:none;color:#fff; }
		#arch-footer .primary a:hover{color:#fff; background-color:#333;
		-webkit-border-radius: 5px 5px 5px 5px;
		-moz-border-radius: 5px 5px 5px 5px;
		CCborderRadius: 5px 5px 5px 5px;}


		#arch-footer .social {position: relative; float: none; margin: 0 auto; text-align: center; margin-top: 55px;}

	}



			/*  #Mobile (Portrait)
================================================== */

    /* Note: Design for a width of 320px */

    @media only screen and (max-width: 320px) {

    	#arch-splash {display: none;}
    	#arch-header .util .date-pane {width: 55%;}
    }