the-internet-vagabond-dot-com/projects/reader/reader.css

/*   
    CSS for reader.theinternetvagabond.com
    Written by Bill Niblock
	 
	Attempting to use a fluid grid and responsive design approach.
	 
	"Optimal" Page width: 1920px
		5 colums of 360px each, with 20px gutters
	
	Assumed default type size: 16px
	 
	Remember: target / context = result
*/

/* =============================
		Reset Styles, Thanks to...
		
		 http://meyerweb.com/eric/tools/css/reset/ 
		   v2.0 | 20110126
		   License: none (public domain)
============================= */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* =============================
		Utility Styles 
============================= */
	
	#clear {
		clear: both;
	}


/* =============================
		Header Styles 
============================= */

	.mainheader{
		position: fixed; top: 0px; left: 0px;
		width: 100%; height: 50px;
		font: italic 2.0em monospace;
		border: 2px outset grey;
	}

	.maintitle{
		float: left;
		padding: 10px 0px;
	}
	
	.feedbuttons{
		float: left;
		display: inline;
	}
	

	
		
/* =============================
		Reader Styles 
============================= */
	
	.reader{
		float: left;
		width: 79.166666666666%; 				/* 1520 / 1920 =  0.791666666*/
		
		position: absolute;
		top: 50px; bottom: 0px; left: 0px;
	}
	
	.r_actions{
	
	}
	
	.feeds{
		float: left;
		width: 290px;							/* Non-scaling width; Changes when at a smaller screen size */
		/* border: 1px solid black; */
		
		position: absolute;
		left: 0px; top: 0px; bottom: 0px;
	}

	.articles{
		float: right;					
		/* border: 1px solid black; */
		
		position: absolute;
		top: 0px; bottom: 0px; right: 0px; left: 290px;
	}

/* =============================
		Read Later Styles 
============================= */

	.later{
		float: right;
		width: 290px;							/* 360 / 1920 = .1875 */
		margin: 0px 1.041666666667%;			/* 20 / 1920 = .0140166666 */
		padding: 0px 5px;
		position: absolute;
		top: 0px; bottom: 0px; right: 0px;
		border: 1px solid black;	
	}
	
	.later #title{
		font: italic 2.0em monospace;
		text-align: center;
	}

	.later #actions{
		display: flex;
		justify-content: center;
	}

	#actions #rl_add {
		padding: 5px 15px;
		border-top-left-radius: 5px;
		border-bottom-left-radius: 5px;
	}

	#actions #rl_sort {
		padding: 5px 15px;
		margin: 0px 5px;
	}

	#actions #rl_list {
		padding: 5px 15px;
		border-top-right-radius: 5px;
		border-bottom-right-radius: 5px;
	}

	#actions div[id^="rl_"] {
		background-color: grey;
		cursor: pointer;
		min-width: 50px;
		max-width: 50px;
		text-align: center;
		float: left;
		box-shadow: 0px 1px 2px 1px black;
	}

	#actions div[id^="rl_"]:hover {
		background-color: #DCDCDC;
	}
	
	#actions div[id^="rl_"]:active {
		box-shadow: 0px 0px 5px 2px #555555 inset;
		background-color: white;
		color: black;
	}
	
	.readlist{
		padding: 0px 5px;	
	}

	.readlist #article {
		padding: 5px;
		margin: 20px 0px;
		border-bottom-right-radius: 15px; 
		background-color: #DCDCDC;
		box-shadow: 1px 1px 2px 2px #555555;
	}

	.readlist #a_date {
		float: left;
		font-size: 0.9em;
	}

	.readlist #a_opts {
		float: right;
	}

	.readlist #a_opts_list {

	}

	.readlist #a_opts_del {

	}

	.readlist #a_title {
		font: 1.1em bold;
	}

	.readlist #a_link {
		font-size: 0.75em;
		color: grey;
	}

/* =======================================
	Responsive -- Width: 1536 -> 960
======================================= */



/* =======================================
	Responsive -- Width: 960-
======================================= */