CSS - Structure with Media Queries

css-structure-with-media-queries.css

/* fonts */
/* ------------------------------------------------------------------------- */


/* reset */
/* ------------------------------------------------------------------------- */

@import url('css/reset.css');
@import url('css/normalize.min.css');

body,html {
	width: 100%;
	height: 100%;
	font-family: Helvetica, Verdana;
	font-weight: lighter;
	font-size:0.9em;
	color: #333;
	margin: 0;
	padding:0;
}
h1,h2,h3,h4,h5,h6 {
	margin: 0 0 10px 0;
	padding:0;
	font-family: 'ProximaNovaSemibold';
	font-size: 1.4em;
	font-weight: normal;
	text-transform: uppercase;
	color:black;
	padding: 0 0 5px 0;
	border-bottom: 3px solid black;
}
span.subheader {
	font-family: 'ProximaNovaLight';
}
ul {
	margin: 0;
	padding:0;
}
ul li {
	list-style: none;
}
a {
	color: #666;
	text-decoration: none;
}
a img, img, a {
    border: 0;
    border:none;
}
p {
	margin: 0 0 10px 0;
}
strong {
	font-family: 'ProximaNovaBold';
	text-transform: uppercase;
}
td,th {
	vertical-align: top;
}
th {
	padding: 0 0 5px 0;
	margin: 0 0 5px 0;
	border-bottom: 2px solid black;
}
tbody td {
	padding: 5px 0 0 0;
}
#mc_embed_signup {
	background: transparent !important;
}
.clear {
	width: 100%;
	clear:both;
}
.hide {
	display: none;
}


/* header */
/* ------------------------------------------------------------------------- */



/* nav */
/* ------------------------------------------------------------------------- */

/* layout */
/* ------------------------------------------------------------------------- */



/* product view */
/* ------------------------------------------------------------------------- */



/* footer */
/* ------------------------------------------------------------------------- */



/* forms */
/* ------------------------------------------------------------------------- */



/* media queries */
/* ------------------------------------------------------------------------- */

/* mobile small (iphone 3/4/5) ----------- */
@media only screen and (max-width : 320px)  {


}
/* mobile large (android) ----------- */
@media only screen and (max-width : 685px)  {
	
}
/* ipad portrait/landscape ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)  {

}
/* ipad portrait ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)  {
	
}
/* ipad landscape ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)  {


}
/* small displays ----------- */
@media only screen and (min-width : 600px)  {
	
}

/* 13 inch displays ----------- */
@media only screen and (min-width : 1224px)  {
	
}
/* 24 inch iMac ----------- */
@media only screen and (min-width : 1600px) {
	
}
/* 27 inch iMac ----------- */
@media only screen and (min-width : 2400px) {
	
}