/* WIDTH TESTS */
/* WidthHelp
   * http://css-tricks.com/css-media-queries/ 
  */




@media (max-width: 1200px){
	body .container {
	background-color:red;
	}	
	#branding {		
		background-color:teal;
		width: auto;
	}
}
  
@media (max-width: 1200px){
	body > .container {
		background-color:cyan;
	}	
	#branding {		
		background-color:silver;
		width: auto;
	}
}


@media (max-width: 867px){
	body > .container {
		ma/rgin: 0;
		
		padding: 0 10px;
		background-color:lime;
	}	
	body  #page {
	  pa/dding:5;
	}
	#branding {
		mar/gin-left:0;   
		width: 300px;
		background-color:blue;
		wid/th: auto;
	}
	
}

@media (max-width: 467px) {
	body > .container {
		padding: 0 0px;
		background-color:yellow;
	}	
	#page {
	  pad/ding:0;
	}
	#branding {
		margin-left:0px;
		background-color:black;
		width: 266px;
	}
}	

	


@me/ia (max-width: 767px) and (min-width: 300px) {
	#page {
		margin: 0;
		width: auto;
		padding: 0 5px;
		background-color:lime;
	}	
}

@m/dia (max-width: 467px) and (min-width: 0px) {
	#page {
		margin: 0;
		width: auto;
		padding: 0 10px;
		background-color:yellow;
	}	
}














@m/edia (max-width: 979px) and (min-width: 768px) {
		header.span12 {
		width: 724px;
		f/loat:none;
	}
}	
@m/edia (max-width: 768) and (min-width: 400px){
		header.span12 {
		width: 300px;
		float:none;
	}
}	

@me/dia (max-width: 979px) and (min-width: 400px)
[class*="span"] {
		header.span12 {
		width: 400px;
		flo/at:none;
		}
}