codesite/static/style.css

/* style.css */

html {
	overflow-y:scroll; /* always display scrollbar to prevent horizontal lurch */
}
img {
	border:0;
}
a {
	color:black;
	text-decoration:underline;
}
a:hover {
	color:blue;
	cursor:pointer;
}
h1 a {
	text-decoration:none;
}
h1 a:hover {
	color:black;
}
h1,h2,h3 {
	margin-top:0;
}
.code {
	background: #F8F8F8;
	font-family:Consolas,monospace;
}

/* */

html, body {
	/* structural */
	height:100%;
	margin:0;
	border:0;
	padding:0;
	
	/* cosmetic */
	font-family:"Helvetica Neue","Segoe UI",Arial,sans-serif;
	font-size:12px;
	background:#DDD url('pixel_weave.png');	/* thanks subtlepatterns.com ! */
	color:#333;
}

#container {
	margin:0 auto;
	width:768px;
	position:relative;
	
	height:auto !important;
	height:100%; /* oldIE */
	min-height:100%;
	
	/* cosmetic */
	background:white;
}

#content {
	padding:14px;
	background:white;
}

/* */

.tag::before {
	content:"";
		
	display:inline-block;
	width:7px;
	height:7px;
	
	margin-right:2px;
	
	background:transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAZUlEQVQI12P4//8/Awyrqqp6KSkp/QdhFRWV7cgS+kDBN0B8RVlZuRikACahB+T8ger6BMTXwJJAiTwg4xvMOCj+ART3ZwCa3YYm8QcopgsyEWasDVT3W5AVMHcgO6gViNORXQ8A84NToxbSsJcAAAAASUVORK5CYII=') no-repeat 0 0;
}

.tag-filter-warn {
	position:fixed;
	top:0;
	right:0;
	
	padding:4px;
	
	background:lightyellow;
	border-bottom: 1px solid #888;
	border-left:1px solid #888;
}

/* */

.projtable {
	border-collapse: collapse;
	width:100%;
}
.projtable tr {	
	transition:0.2s linear;
}
.projtable tr:hover {
	background:#F8F8F8;
}
.projtable td {
	padding: 2px 4px;
}
.projtable small {
	color:grey;
	font-style:italic;
}
.projtable tr td:first-child {
	width:95px;
}

.projinfo {
	position:relative;
}
.projbody {
	position:absolute;
	left:0;
}
.projbody_halfw {
	right: 74px;
}
.projbody_fullw {
	right:0;
}
.projimg {
	position:absolute;
	right:0;
	
	width:62px;	/* 60px + 2px border */
}

/* */

.homeimage {
	width:90px;
	height:32px;
}

.homeimage-sprite {
	background: white url('logos.jpg') no-repeat 0 0;
}

.thumbimage {
	width:60px;
	height:60px;
	opacity: 0.8;
	transition:0.2s opacity;
	border:1px solid lightgrey;
}
.thumbimage:hover {
	opacity:1.0;
}

.no-image {
	width:90px;
	height:32px;
	display:block;
	background: white url('no_image.png') no-repeat 0 0;
}