@import url('reset.css');


/*****************************************************************************
  GLOBAL STYLES  *************************************************************
*****************************************************************************/

html {
    overflow-y: scroll;
}

body {
	background-color: #fff;
}

a {
	text-decoration: none;
}


h1 {
	font: 42px/42px Trebuchet MS, Tahoma, Helvetica, Arial, sans-serif;
	color: #234F68;
	margin: 0 0 39px;
	position: relative;
	left: -2px;
}

h3 {
	font: 28px/28px Trebuchet MS, Tahoma, Helvetica, Arial, sans-serif;
	color: #234F68;
	margin: 0 0 12px 0;
}

h4 {
	font: 14px/18px Trebuchet MS, Tahoma, Helvetica, Arial, sans-serif;
	color: #333;
	font-weight: bold;
	margin: 0 0 8px 0;
}


.ml1 {margin-left: 118px}
.ml2 {margin-left: 236px}
.ml3 {margin-left: 354px}
.ml4 {margin-left: 472px}

.mr1 {margin-right: 118px}
.mr2 {margin-right: 236px}
.mr3 {margin-right: 354px}

.x1 {width: 118px}
.x2 {width: 236px}
.x3 {width: 354px}
.x4 {width: 472px}
.x5 {width: 590px}
.x6 {width: 708px}

#container {
	width: 984px;
	margin: 0 auto 0;
	padding:0;
	position: relative;
}

	#mission {
		position: absolute;
		top: 25px;
		left: 20px; /* 20px less margin than in illustrator doc */
		/* left: 256px; */
		width: 191px;
		height: 75px;
		background: url(../../img/mission.png) top left no-repeat transparent;
		z-index:9;
	}
	
	#logo {
		position: absolute;
		top: 111px;
		left: 16px;
		width: 712px;
		height: 51px;
		background: url(../../img/logo.png) top left no-repeat transparent;
		z-index:10;
	}
	
	/* aligned right */
	#social {
		position: absolute;
		top: 0;
		right: 10px;
		width: 500px;
		height: 65px;
		z-index:20;
	}
	
		#social .ribbon {
			display: block;
			width: 52px; /*image is 48px */
			height: 65px;
			float: right;
			cursor: pointer;
		}
	
	
	/* aligned left 
	#social {
		position: absolute;
		top: 0;
		left: 20px;
		width: 225px;
		height: 65px;
		z-index:20;
	}
	
		#social .ribbon {
			display: block;
			width: 52px; 
			height: 65px;
			float: left;
			cursor: pointer;
		}*/
		
			#social #twitter {background: url(../../img/social-twitter.png) top left no-repeat transparent;}
			#social #twitter:hover {background: url(../../img/social-twitter-over.png) top left no-repeat transparent;}
			
			#social #facebook {background: url(../../img/social-facebook.png) top left no-repeat transparent;}
			#social #facebook:hover {background: url(../../img/social-facebook-over.png) top left no-repeat transparent;}
			
			#social #youtube {background: url(../../img/social-youtube.png) top left no-repeat transparent;}
			#social #youtube:hover {background: url(../../img/social-youtube-over.png) top left no-repeat transparent;}
			
			#social #flickr {background: url(../../img/social-flickr.png) top left no-repeat transparent;}
			#social #flickr:hover {background: url(../../img/social-flickr-over.png) top left no-repeat transparent;}
			
			
	
	
	
	#sidebar {
		position: absolute;
		top: 225px;
		left: 20px;
		width: 175px;
		border-right: 1px solid #ccc;
		z-index:5;
	}
	
		#sidebar ul {
			margin: 0;
			padding: 0;
			list-style: none outside;
		}
		
		#sidebar li {
			display: block;
			height: 18px;
			margin-bottom: 16px;
			font: 16px/18px Trebuchet MS, Tahoma, Helvetica, Arial, sans-serif;
			list-style: none outside;
		}
		
		.cufon-active #sidebar li {
			font-weight: bold;
			letter-spacing: -1px;
			font-size: 18px;
		}
	
		#sidebar a {
			color: #999;
		}
		
		#sidebar a:hover,
		#sidebar a.active {
			color: #234F68;
		}
	
	
	
	
	
	#content {
		position: absolute;
		top: 225px;
		left: 20px;
		width: 944px;
		z-index:1;
	}
	
		#content a {
			color: #234F68;
		}
		
			#content a:hover {
				border-bottom: 1px solid #234F68;
			}
		
		#content p {
			font: 14px/18px HelveticaLT, Arial, sans-serif;
			color: #555;
			margin-bottom: 16px;
		}
		
			#content p.large {
				font-size: 18px;
				line-height: 24px;
				margin-bottom: 26px;
			}
			
			#content p .extramargin {
				display:block;
				margin-left:16px;
			}
		
		#content ul {
			display: block;
			padding: 0 0 0 2px;
			
		}
		
		#content li {
			border-left: 9px solid #eee;
			padding: 4px 0 4px 16px;
			list-style-position: outside;
			list-style-type: none;
			font: 16px/18px HelveticaLT, Helvetica, Arial, sans-serif;
			color: #555;
			display: block;
		}
		
			#content li ul {
				list-style-position: outside;
				list-style-type: square;
				padding: 5px 0 0 0;
				display: block;
			}
			
			#content li ul li {
				border: none;
				padding:4px 0 4px 10px;
			}
		
		#content .infobox {
			background-color: #234F68; 
			color: #fff !important; 
			padding: 16px;
			width:294px; /*262 if subtracting padding */
			filter:alpha(opacity=80);
			-moz-opacity:0.8];
			-khtml-opacity: 0.8;
			opacity: 0.8;
		}
		
			#content .infobox p {
				color: #fff;
				font: 12px/16px Helvetica, Arial, sans-serif;
				margin-bottom:10px;
			}
		
		#content .frameleft {
			float: left;
			display: block;
			position: relative;
			padding-bottom: 15px;
		}
		
		#content .frameright {
			float: right;
			display: block;
			position: relative;
			padding-bottom: 16px;
		}
		
			#content .frameleft .caption,
			#content .frameright .caption {
				position: absolute;
				display: block;
				bottom:0;
				left:0;
				height: 16px;
				font: 10px/10px Verdana, Helvetica, Arial, sans-serif;
				color: #777;
			}
	
		#content .artistlist {
			font: 12px/16px Helvetica, Helvetica Neue, Arial, sans-serif;
			color: #666;
			display: block;
			float: left;
		}
		
			#content .artistlist .curators {
				font-size: 12px;
				color: #444;
				line-height: 18px;
				display: block;
				margin-bottom: 10px;
			}
			
				#content .artistlist .curators .small {font-size:10px;position: relative; top: 2px;}
		
		
		#content .teamlist {
			font: 12px/16px HelveticaLT, Helvetica, Arial, sans-serif;
			color: #666;
			display: block;
			float: left;
		}
		
			#content .teamlist p {
				font: 14/16px HelveticaLT, Helvetica, Arial, sans-serif;
			}
			
			
	/* ARTIST CORPS STYLES */
		.artistname {
			font-size: 18px !important;
			line-height: 24px !important;
		}	
		
		.aristlighter {
			color: #aaa;
			margin-left:10px;
		}
		
		.spacer {
			display: block;
			height:75px;
		}
		
		.maggiethumb {border: 1px solid #eee; cursor:pointer}		
		.maggiethumb:hover {border: 1px solid #A22430}	
		
		.ac-thumb {
			margin-right: 16px;
		}
	
	#footer {
		height:50px;
	}

.cufon-loading {
	visibility: hidden !important;
}

.lighter {color: #999}

.highlight{
	background-color: #ccebfc; 
	color: #555;
	padding:0 2px;
}

.hidden {
	display: none;
}

.divider {
	display: block;
	height:1px;
	border-bottom:1px solid #eee;
	margin: 25px auto;
	width: 708px;
}

.clear {
	display: block;
	clear: both;
}
			


/* SCROLLABLE CSS */
/* position and dimensions of the navigator */
.navi {
	margin-left:328px;
	width:200px;
	height:20px;
}


/* items inside navigator */
.navi a {
	width:8px;
	height:8px;
	float:left;
	margin:3px;
	background:url(img/navigator.png) 0 0 no-repeat;
	display:block;
	font-size:1px;
}

/* mouseover state */
.navi a:hover {
	background-position:0 -8px;      
}

/* active state (current page state) */
.navi a.active {
	background-position:0 -16px;     
}

/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
.scrollable {
	float:left;
	position: relative;
	overflow:hidden;
	width: 590px;
	margin: 0;
	padding: 0;
	height:150px;
}

/*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accommodate scrollable items.
	it's enough that you set width and height for the root element and
	not for this element.
*/
.scrollable .items {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
}

/*
	a single item. must be floated in horizontal scrolling.
	typically, this element is the one that *you* will style
	the most.
*/
.items div {
	float:left;
}

.scrollable-container {
	width: 620px;
}

	.scrollable-container a.next,
	.scrollable-container a.prev {
		display: block;
		height:150px;
		width:20px;
		cursor:pointer;
		z-index:999;
	}
	
	.scrollable-container a.next {
		float: right;
		background: url(/img/next.png) center no-repeat;
	}
	
		.scrollable-container a.next:hover {
			background: url(/img/next-hover.png) center no-repeat;
			border: none !important;
		}	
	
	.scrollable-container a.prev {
		float: left;
		margin-left: -30px;
		background: url(/img/prev.png) center no-repeat;
	}
		
		.scrollable-container a.prev:hover {
			background: url(/img/prev-hover.png) center no-repeat;
			border: none !important;
		}	
		
.disabled {visibility: hidden;}