/*  
Name: RainLab
Created: 2011 May 09
Updated: 2011 May 18

Description: A layout to display research progress and results 
  for the RAIN Lab, Computer and Information Science at the 
  University of Oregon.

Some components modeled after designs from OSWD.org:
	Tidy Blog by Aaron Ganschow
	Naturalist by Darren Hester
		http://www.designsbydarren.com
		License: Released Under the "Creative Commons License", 
		http://creativecommons.org/licenses/by-nc/2.5/
and Handcrafted CSS by Dan Cederholm.

Color schemes based on color palettes from www.colourlovers.com
	palette/11352/Overpriced_coffee
		Victorian Brown by Hailey2005 	330000 (51/0/0)
		teddy nose brown by Ady 		4c2a1e (76/42/30)
	palette/88389/coffee__cream
		froth by jobarnes 				f5eede (245/238/222)
		gareth by jobarnes 				d3c5b0 (211/197/176)
		just a splash by jobarnes 		755A42 (117/90/66)
		hint o' milk by jobarnes 		473423 (71/52/35)
and Tugboat Coffee by Dan Cederholm
	a14141	red
	
*/

body{
	background: #f5eede;		/* froth (light) */
	min-width:700px;
}

p{
	padding: 20px 20px 0 20px;
	font-family: Georgia, serif;
	text-align: left;	
	color: #473423; 			/* hint o' milk (dark) */
}

h1{
	padding: 20px 20px 0 20px;
	font-size: 1.2em;
	font-family: Georgia, serif;
	color: #473423; 				/* hint o' milk (dark) */
}

a:hover{
	color: #f5eede;				/* froth (light) */
	background: #a14141;		/* Tugboat Coffee (red) */
}

/* The contents of the page of sandwiched between dark 
 * strips of frame on the top and bottom
 */
.frame{
	clear: both;
	background: #473423; 		/* hint o' milk (dark) */
	color: #f5eede; 			/* froth (light) */
}

/* An id for horizontal row of links in the header */
.frame #menuTop{
	padding: 0 5px 0 0;
	text-align: right;	
}

.frame #menuTop a{
	padding: 0 10px 0 10px;
	text-transform: uppercase;
}

.frame a{
	color: #f5eede;					/* froth (light) */
	font-family: Georgia, serif;
	font-size: 1em;
	text-align: center;
	text-decoration: none;
}

.frame p{
	clear: both;
	padding: 10px 10px 10px 10px;
	color:  #f5eede;				/* froth (light) */
	font-family: Georgia, serif;
	font-size: 1em;
	text-align: center;
}

.frame h1{
	margin: 20px 0 0 0;
	color: #f5eede; 				/* froth (light) */
	font-family: Georgia, serif;
	font-size: 4em;
	font-variant: small-caps;
	text-align: left;
}
.frame h2{
	margin: 0 0 0 20px;
	color: #f5eede; 				/* froth (light) */
	font-family: Georgia, serif;
	font-size: 1.2em;
	font-weight:normal;
	font-variant: small-caps;
	text-align: left;
}



/* An id for the main area of the page */
#inner {
	width: 100%;
}

/* The main page has two main areas: a feature (image and text) and
 * narrative (primarily text).  The feature is presented as a fixed 
 * width column and the narrative is fluid filling the remainder of
 * the page.
 */
 
/* An id for featured content (left side column) */
#mainLeft{
	padding: 15px 10px 20px 10px;
	float: left;
	width: 250px;
}

/* A column with medium dark background */
#feature{
	padding: 10px 10px 10px 10px;
	background: #d3c5b0; 			/* gareth (medium) */
/*	border-radius: 8px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	box-shadow: 2px 2px 4px rgba(0.0,0.0,0.0,0.3);  
	-webkit-box-shadow: 2px 2px 4px #bdbcb0;
	-moz-box-shadow: 2px 2px 4px #bdbcb0;
*/
}

/* An id for the narrative content (right side) */
#mainRight{
	width: 100%;
	min-width: 250px;
}

#mainRight h1{
	margin-left: 50px;
	font-size: 1.2em;
	font-family: Georgia, serif;
	color: #473423; 				/* hint o' milk (dark) */
}

#mainRight p{
	font-family: Georgia, serif;
	text-align: left;
}

/* The secondary pages have two main areas: narrative (primarily 
 * text) and a picture menu that contains links.  The picture menu 
 * is presented as a fixed width column and the narrative is fluid 
 * to fill the remainder of the page.
 */
 
/* An id for narrative content (left side) */
#narrative{
	float: left;
	width: 60%;
	min-width: 250px;
}

/* An id for the fixed width content (right side column) */
#menuRight{
	padding: 15px 10px 20px 10px;
	float: right;
	width: 350px;
}


/* A light [medium] colored frame (border) that can be placed 
 * around content (image, caption(s), or text).  The picture 
 * frame is centered in the containing component.
 */
.pictureFrame{
	margin-right: auto;
	margin-left: auto;
	width: 80%;
	min-width: 70px;
	max-width: 150px;
	border: 5px solid #f5eede;		/* froth (light) */
/*	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	box-shadow: 2px 2px 4px rgba(0.0,0.0,0.0,0.3);  
	-webkit-box-shadow: 2px 2px 4px #bdbcb0;
	-moz-box-shadow: 2px 2px 4px #bdbcb0;
*/
}

.pictureFrame-med{
	margin-right: auto;
	margin-left: auto;
	width: 80%;
	min-width: 70px;
	max-width: 150px;
	border: 7px solid #d3c5b0; 		/* gareth (medium) */
/*	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	box-shadow: 2px 2px 4px rgba(0.0,0.0,0.0,0.3);  
	-webkit-box-shadow: 2px 2px 4px #bdbcb0;
	-moz-box-shadow: 2px 2px 4px #bdbcb0;
*/
}

.pictureFrame-med img,
.pictureFrame img {
	border: 0;
	width: 100%;	
	min-width: 70px;
	padding-bottom: 5px;
}

.pictureFrame-med a,
.pictureFrame a {
	text-decoration: none;
}

.pictureFrame-med .caption,
.pictureFrame .caption{
	font-family: Georgia, serif;
	text-align: center;
	color:  #f5eede;				/* froth (light) */
	font-size: 0.8em;
	padding-bottom: 5px;
	background: #473423; 			/* hint o' milk (dark) */
	width: 100%;
}

.pictureFrame-med a .caption:hover,
.pictureFrame-med a .caption:hover {
	background: #a14141;			/* Tugboat Coffee (red) */
}


/* A collection of menu items that are framed and create
 * links to other content within this website
 */
#pictureMenu {
	padding: 0 20px 0 20px;
	float: right;
}

#pictureMenu .menuItem{
	clear: both;
	/* top right  bottom  left */
	margin: 10px auto 10px auto;
	width: 100%;
	min-width: 250px;
	min-height: 80px;
	background: #d3c5b0; 			/* gareth (medium) */
	border: 5px solid #d3c5b0; 		/* gareth (medium) */
/*	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	box-shadow: 2px 2px 4px rgba(0.0,0.0,0.0,0.3);  
	-webkit-box-shadow: 2px 2px 4px #bdbcb0;
	-moz-box-shadow: 2px 2px 4px #bdbcb0;
*/
}

#pictureMenu .menuItem:after{
	clear: both;
}

#pictureMenu .menuItem a{
	background: #473423; 			/* hint o' milk (dark) */
	color:  #f5eede;				/* froth (light) */
	text-decoration: none;
}

#pictureMenu .menuItem a:hover {
	background: #a14141;			/* Tugboat Coffee (red) */
}

#pictureMenu .menuItem a img{
	float:left;
	border: 2px solid #473423; 		/* hint o' milk (dark) */
	width: 100px;	
}

#pictureMenu .menuItem a #text{
	color:  #473423; 				/* hint o' milk (dark) */
	margin-left: 115px;
	width: 200px;
	font-family: Georgia, serif;
	text-align: left;
	text-decoration: none;
}

#pictureMenu .menuItem a #text strong{
	font-size: 0.8em;
}

#pictureMenu .menuItem a #text em{
	font-size: 0.8em;
}