/***** Screen 960px *****/


.top			 								{ margin-top:28px; }	
.base											{ margin-bottom:28px; }	
span.example									{ margin-bottom:5px; padding:5px 0 5px 0; background-color:#eee; text-align:center; width:100%; display:block; }
.spacer-top										{ margin:0 auto; margin-top:60px; }	



/***** Screen Bigger than 960px *****/
@media only screen and (min-width:1200px) {

.top			 								{ margin-top:34px; }	
.base											{ margin-bottom:32px; }	
.example										{ margin:0; padding:0; }
.spacer-top										{ margin:0 auto; margin-top:100px; }	

}



/***** Tablet (Smaller than 959px) *****/
@media only screen and (min-width: 768px) and (max-width: 959px) {

.top			 								{ margin-top:20px; }	
.base											{ margin-bottom:20px; }	
.example										{ margin:0; padding:0; }

}



/***** Phone (portrait 300px) *****/
@media only screen and (max-width: 767px) {
.top			 								{ margin-top:10px; }	
.base											{ margin-bottom:0px; }	
.example										{ margin:0; padding:0; }

}


	
/***** Phone (landscape 420px) *****/
@media only screen and (min-width: 480px) and (max-width: 767px) {
	
.example										{ margin:0; padding:0; }

}



/***** Retina *****/
@media only screen and (-webkit-min-device-pixel-ratio:1.5) {

.example										{ margin:0; padding:0; }

}