index.css

html, body {
	margin: 0;
	padding: 0;
	font-family: 'Optima', sans-serif;
	background-color: #EEE;
}

a, a:visited {
	color: #aaa;
}
a:hover, a:active {
	color: #ccc;
}

/* backdrops */

.backdrop {
	position: fixed;
	width: 290px;
	height: 100%;
	top: 0px;
	background-color: white;
}
#left-backdrop {
	left: 0px;
}
#right-backdrop {
	right: 0px;
}



#app {
	height: 100%;
	width: 100%;
}

.swatch {
	height: 10px;
	width: 10px;
	float: left;
}

.row {
	clear: both;
}

/**
 * Image and Mosaic
 **/

#content {
	padding-left: 270px;
	padding-right: 270px;
	height: 100%;
/*	text-align: center;*/
}

/* Images */

#original {
	position: absolute;
	opacity: 0.4;
	top: 5px;
	left: 50%;
	width: 0px;
	z-index: 2;
}
#mosaic {
	position: relative;
	padding-top: 5px;
	left: 50%;
	width: 0px;
}
#largeImage {
	position: absolute;
	padding: 8px;
	background-color: #e3e3e3;
	border: 1px solid #bfbfbf;
	height: 250px;
}

#mosiac img {
	cursor: pointer;
}

#profile-loading {
	margin-top: 250px;
	position: absolute;
	left: 50%;
	margin-left: -15px;
}


/**
 * Log and Stats
 **/
#log {
	width: 260px;
	max-height: 600px;
	overflow-y: hidden;
	position: absolute;
	bottom: 10px;
	right: 10px;
	color: #555;
	font-size: 0.7em;
	vertical-align: bottom;
	-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,1)));
	font-family: 'Ubuntu Mono', sans-serif;
}

#stats {
	position: absolute;
	top: 10px;
	right: 10px;
	color: #888;
	text-align: right;
	padding: 3px;
	font-family: 'Ubuntu Mono', sans-serif;
}

.hidden {
	display: none;
}

.look-here {
	background: rgba(250, 248, 190, 0.8);
	
}

#instructions {
	position: absolute;
	top: 5px;
	left: 20px;
	width: 250px;
	font-size: 0.9em;
/*	background-color: white;*/
/*	padding-left: 5px;*/
}

#instructions div {
	padding: 2px;
}

.instruct {
	background-color: #F6F6F6;
}

h1 {
	font-family: 'Ubuntu Mono', sans-serif;
}

h2 {
	font-family: 'Ubuntu Mono', sans-serif;
}

h3 {
	font-family: 'Ubuntu Mono', sans-serif;
	font-size: 0.9em;
	padding: 0 15px 0;
	border-bottom: 1px solid #666;
}

#friend-filter {
	width: 100%;
}
.default-text {
	color: #a1a1a1;
	font-style: italic;
}
.note {
	font-size: 0.8em;
	color: #999;
	padding-left: 5px;
}
.large-note {
	font-size: 0.95em;
	text-shadow: #888 0.1em 0.1em 0.2em;
}
#friend-list {
	padding: 0 5px 0;
	max-height: 200px;
	overflow: auto;
}
#friend-list li {
	list-style-type: none;
}
.friend {
	display: block;
	display: none;
	margin: 1px;
	cursor: pointer;
	background: #DDD;
}
.friend-profile {
	height: 25px;
	vertical-align: -8px;
}
.friend-name {
	height: 100%;
}

.loading-div {
	text-align: center;
}

.control {
/*	margin: 10px 0 10px;*/
}

button {
	font-family: 'Ubuntu Mono', sans-serif;
	font-size: 1em;
	border: 0;
	min-width: 225px;
}

.mouseover {
	background: #EEE;
	cursor: pointer;
}

.twodigits {
	width: 20px;
}
#mosaic-loading {
	font-family: 'Ubuntu Mono', sans-serif;
}

/**
 * Welcome Overlay
 **/

#welcome {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(50, 50, 50, 0.7);
	color: #FFF;
	text-align: center;
	z-index: 50;
}
#login, #logout {
	margin-top: 20px;
	margin-left: auto;
	margin-right: auto;
	width: 300px;
	display: none;
}
#info {
	margin-top: 100px;
	margin-left: auto;
	margin-right: auto;
	width: 450px;
}
#continue {
	display: none;
	margin-top: 20px;
}
#footer {
	margin-top: 200px;
}
hr {
	width: 300px;
}








#overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.9);
	z-index: 10;
}
.aboveOverlay {
	position: relative;
	z-index: 20;
}
.highlighted {
	/* dark red rgb(230, 32, 32)
	light yellow #FDFF47*/
	box-shadow: 0px 0px 30px  #FCFF00;
}