#main .list { display:block; position:relative; }
#main .list .item { display:block; box-sizing:border-box; }

p a:hover { color:#213f54; background:none; }

/******************************/
/* SMALL SCREENS              */
/******************************/

/* Define mobile styles */
@media only screen 
{ 
	#main { background:#dfdfdf; }
	#main .list { padding:0 8px; margin:0; }
	#main .item { display:block; margin:0 0 8px; background:#fff; }
	#main .buttons { text-align:left; margin:16px 0 0; }
	#main .date { text-align:left; text-transform:uppercase; padding:16px 16px 0; }
		#main .date * { display:inline; font-size:0.65rem; color:#999; }
	#main .details { padding:8px 16px 16px; text-align:left; }
		#main .details h3 { margin-top:0; font-size:1rem; font-weight:400; line-height:1.5em; }
		#main .details p { font-size:0.8rem; }
}
@media only screen and (orientation:portrait) { }
@media only screen and (orientation:landscape) { }

/* max-width 640px, mobile-only styles, use when QAing mobile issues */
@media only screen and (max-width:40em) { }


/******************************/
/* MEDIUM SCREENS             */
/******************************/

/* min-width 641px, medium screens */
@media only screen and (min-width:40.063em) 
{ 
	#main .item { padding:32px 0; }
	#main .buttons { display:block; }
	#main .date { box-sizing:border-box; padding:0 32px; float:left; width:120px; text-align:center; text-transform:uppercase; }
		#main .date * { display:block; }
		#main .day { margin-bottom:4px; font-size:2rem; font-weight:600; color:#ccc; }
		#main .month { font-size:1.2rem; color:#333; }
		#main .year { font-size:1rem; color:#333; }
	#main .details { margin:0 0 0 120px; padding:0 32px; border-left:dashed 1px #ccc; text-align:left; }
		#main .details h3 { font-size:1.5rem; line-height:1.2em; }
		#main .details p { font-size:1rem; }
}
@media only screen and (min-width:40.063em) and (orientation:portrait) { }
@media only screen and (min-width:40.063em) and (orientation:landscape) { }

/* min-width 641px and max-width 1024px, use when QAing tablet-only issues */
@media only screen and (min-width:40.063em) and (max-width:64em) { }



/******************************/
/* LARGE SCREENS              */
/******************************/

/* min-width 1025px, large screens */
@media only screen and (min-width:64.063em) 
{ 
	#main { background:#efefef; }
	#main .list { padding:48px; margin:0 auto; }
	#main .item { display:block; margin:0 0 48px; background:#fff; }
}
@media only screen and (min-width:64.063em) and (orientation:portrait) { }
@media only screen and (min-width:64.063em) and (orientation:landscape) { }

/* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */
@media only screen and (min-width:64.063em) and (max-width:90em) { }



/******************************/
/* XLARGE SCREENS             */
/******************************/

/* min-width 1441px, xlarge screens */
@media only screen and (min-width:90.063em) { }
@media only screen and (min-width:90.063em) and (orientation:portrait) { }
@media only screen and (min-width:90.063em) and (orientation:landscape) { }

/* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */
@media only screen and (min-width:90.063em) and (max-width:120em) { }



/******************************/
/* XXLARGE SCREENS            */
/******************************/

/* min-width 1921px, xxlarge screens */
@media only screen and (min-width:120.063em) { }