Original media queries for my website, www.theo-nicolaou.co.uk

tn-mediaqueries.css

@media screen and (min-width: 320px) and (max-width: 479px) {
	#wrapper {
		width: 93.8%;
		border: none;
		text-align: center;
		margin: 5px;
		/*background-color: #ff0066;*/
	}
	
	#wrapper header nav li {
		margin: 0px;
	}
	
	nav#breadcrumb { 
		display: none;
	}
	
	article hgroup h1, article hgroup h2, article hgroup h3 {
		width: 60.634146%;
		margin-left: 0%; /*was 95px: 95 / 815 */
	}
	article .floatleft {
		float: right;
	}
	.projectlistitem-CAP, .projectlistitem-SS, .projectlistitem-BPS, .projectlistitem-SP, .projectlistitem-PL, .projectlistitem-DR, .projectlistitem-CBF, .projectlistitem-UKC, .projectlistitem-TDG {
		background-image: none;
	}
	
	aside {
		display: block;
		float: none;
		width: 100%;
	}
	
	aside img {
		max-width: 100%;
	}
	
	article {
		width: 100%;
	}
	
	aside .portfolio {
		display: none;
	}
	
	video {
		max-width: 100%;
	}
	
	input, textarea {
  		width: 63.444444%;
  	}
  	
  	.form li {
		width: 83.853659%;  	
  	}
}/*/mediaquery*/

@media screen and (min-width: 480px) and (max-width: 767px) {
	#wrapper {
		width: 93.8%;
		border: none;
		text-align: center;
		margin: 5px;
		/*background-color: #cccccc;*/
	}
	
	#wrapper header nav li {
		margin: 0px;
	}
	
	nav#breadcrumb { 
		display: none;
	}	
	
	article hgroup h1, article hgroup h2, article hgroup h3 {
		width: 80.634146%;
		margin-left: 0%; /*was 95px: 95 / 815 */
	}
	article .floatleft {
		float: right;
	}
	.projectlistitem-CAP, .projectlistitem-SS, .projectlistitem-BPS, .projectlistitem-SP, .projectlistitem-PL, .projectlistitem-DR, .projectlistitem-CBF, .projectlistitem-UKC, .projectlistitem-TDG {
		background-image: none;
	}
	
	aside {
		float: none;
		width: 100%;
	}
	
	aside img {
		max-width: 100%;
	}
	
	article {
		width: 100%;
	}
	
	aside .portfolio {
		display: none;
	}
	video {
		max-width: 100%;
	}
	
	input, textarea {
  		width: 55.444444%;
  	}

  	.form li {
		width: 78.853659%;  	
  	}
}/*/mediaquery*/

/*media screen and (min-width: 600px) and (max-width:767px) {
	#wrapper {
		width: 93.8%;
		border: none;
		text-align: center;
		margin: 5px;
	}
	
	#wrapper header nav li {
		margin: 0px;
	}
	
	nav#breadcrumb { 
		display: block;
	}
	
	article hgroup h1, article hgroup h2, article hgroup h3 {
	width: 57.634146%; 
	margin-left: 13.9%;
}
}*/

@media screen and (min-width: 768px) and (max-width: 905px) {
	#wrapper {
		width: 93.8%;
		text-align: center;
		margin: 0px auto;
	}
	
	#wrapper header nav li {
		margin: 0px;
	}
	
	nav#breadcrumb { 
		display: block;
	}
	
	article .floatleft {
		margin-right: 1%;
	}
	article hgroup h1, article hgroup h2, article hgroup h3 {
	width: 63%; 
	margin-left: 12.5%;
	}
	
	aside img {
		max-width: 100%;
	}
	
	.portfolio li {
		margin-right: 2.5%;
	}
	
	input, textarea {
  		width: 43.444444%;
  	}

  	.form li {
		width: 68.853659%;  	
  	}
	
}/*/mediaquery*/

@media screen and (min-width: 906px) and (max-width: 1105px) {
	#wrapper {
		width: 76.8%;/*56.8%;*/
		text-align: center;
		margin: 5px auto;		
		/*background-color: #006600;*/
	}
	
	#wrapper header nav li {
		margin: 0px;
	}
	
	nav#breadcrumb { 
		display: block;
	}
	
	article .floatleft {
		margin-right: 1%;
	}
	
	article hgroup h1, article hgroup h2, article hgroup h3 {
	width: 63%; 
	margin-left: 12.5%;
	}
	
	aside img {
		max-width: 100%;
	}
	
	.portfolio li {
		margin-right: 2.5%;
	}
	
	input, textarea {
  		width: 45.444444%;
  	}

  	.form li {
		width: 70.853659%;  	
  	}
	
}/*/mediaquery*/

@media screen and (min-width: 1106px) {
	#wrapper {
		width: 76.8%;
		text-align: center;
		margin: 5px auto;
	}
}/*/mediaquery*/