@import url('mobile.css');

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

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

   	#arch-main .main-right {width: 76%;}
   	.main-content .content {width: 68%; } 
   	.main-content .sidebar {width: 25%;}
   	.main-content .sidebar img {width: 100%;}

   }

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

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

    	#arch-main .sub-nav {width: 200px;}
    	#arch-main .main-right {width: 72%;}
    	#arch-main .main-right .main-content {width: 90%;}

    	.main-content .content {width: 97%; border: 0; }
    	.main-content .sidebar {width: 95%; } 
    }


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

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

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

			#arch-main .main-right {width: 100%; float: none; } 

			#arch-main .sub-nav {width: 100%; text-align: center; padding: 10px 0px; background-color: #e5e5e5;}
		#arch-main .sub-nav h2 {padding: 0; margin: 0;margin-bottom: 10px; color: #000;}

			#arch-main .sub-nav li {list-style: none; margin-bottom: 10px; float: none; display: inline-block; margin-bottom: 0; padding: 0px 5px !important;}
      #arch-main .sub-nav li a {padding: 0 5px !important; color: #333 !important;}
      #arch-main .sub-nav li a:hover {color: #fff !important;}
			#arch-main .sub-nav li a.selected {color: #fff !important;}

#arch-main .main-right .splash  {display: none;}

		}


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

    /* Note: Design for a width of 320px */
	 @media only screen and (max-width: 320px) {	

	 	#arch-main .main-right {width: 96%;}

	 	#arch-main .sub-nav {font-size: .9em; }


	 }