/* --- MEYER RESET ---*/
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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;	
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
/*- end meyer reset -*/

/*--- COLOR CONVENTIONS ---
  main body background:     #ddd
  main contentarea bg       #fff
  copy color:               #000
  link hover color			#29a1e1
  navigation bar bg			#1a1d1f
  dotted lines				#454849
  
  




- end color conventions -*/

/*--- GENERAL STYLING ---*/
body {
  background-color: #ddd;
  font-family: Helvetica, Arial, sans-serif;
  background-image: url(/interactives/exhibitions/2010/henricartierbresson/images/background_tile.gif);
  background-repeat: repeat;
  overflow: visible;
}
p {
		margin-bottom: 5px;
}

a {
		color: #000;
		text-decoration: none;
}
a:link {
		color: #000;
}
a:hover {
		color: #888;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
 
.clearfix {
  display: inline-block;
}
 
html[xmlns] .clearfix {
  display: block;
}
 
* html .clearfix {
  height: 1%;
}


/*- end general styling -*/

div#main {
		position: relative;
		min-width: 950px;
		max-width: 1440px;
		min-height: 560px;
		/*max-height: 990px;*/
		background-color: #ffffff;
		padding-bottom:20px; 
		margin: 0px auto;
}

* html #main{
  width:950px;
  height:560px;
}

div.wrapper {
		width: 100%;
		height: 100%;
}

div#nav_wrapper {
		width: 290px;
		float: left;
		z-index: 51;
		position: relative;
    padding-bottom:20px;
    padding-top:20px;
}
.theme_detail div#nav_wrapper, .journey_detail div#nav_wrapper, .chronology_detail div#nav_wrapper {
		width: 290px;
}

div#nav_wrapper #nav_title a {
		margin-left: -25px;
		background: url(/interactives/exhibitions/2010/henricartierbresson/images/logo_lg.png) no-repeat;
		width: 305px;
		display: block;
		height: 47px;
		margin-bottom: 8px;
		
}

* html #nav_wrapper #nav_title a
{
  width:auto;
}

.theme_detail div#nav_wrapper #nav_title a, .journey_detail div#nav_wrapper #nav_title a, .chronology_detail div#nav_wrapper #nav_title a{
		/*background: url(/images/logo_sm.png) no-repeat;*/
}

div#nav {
		background-color: #1a1d1f;
		font-size:  0.813em;
		line-height: 1.45em;
		padding: 20px 30px 13px 45px;
		color: #ffffff;
}

div#nav_wrapper a {
		color: #ffffff;
		
}
div#nav_wrapper a:hover {
		color: #626f76;
}

div#nav_wrapper .photo_details {
		padding: 0px 20px 0px 45px;
		margin-top: 18px;
		font-size: 0.71em;
		line-height: 1.45em;
		position:relative;
}
div#nav_wrapper .photo_details a {
		color: #29a1e1;
		text-decoration: underline;
}
div#nav_wrapper .photo_details .detail_attribute {
		color: #858585;
}
div#nav_wrapper .photo_details .learn_more {
		margin-top: 10px;
		color: #858585;
}
div#nav_wrapper .photo_details #audio_player_content {
		margin: 2px 0px 0px 0px;
}

div#nav_wrapper .photo_details .page {
  display:none;
}

div#nav_wrapper .photo_details .page.selected {
  display:block;
}

div#nav_wrapper .photo_details #pager {
  width: 100%;
  height: 20px;
  position:absolute;
}


div#nav #exhibition_dates {
	background: url('/interactives/exhibitions/2010/henricartierbresson/images/exhibition_dates.gif') no-repeat;
	font-size: 14px;
	height: 0px;
	padding-top: 14px;
	overflow: hidden;
	margin-bottom: 18px;
}

div#nav .exhibition {
  margin-bottom:10px;
}

div#nav .exhibition_location {
	font-family: Georgia, serif;
	line-height: 11px;
	font-size: 11px;
}

div#nav .exhibition_date {
	font-family: Georgia, serif;
	line-height: 18px;
	font-size: 10px;
  margin-left:5px;
  font-style: italic;
}

div#nav .homepage_intro_text {
	margin-bottom: 4px;
}

div#nav .homepage_quote {
	margin-bottom: 3px;
	font-family: Georgia, serif;
	font-style: italic;
	line-height: 1.2em;
	font-size: 1.2em;
}

div#nav .homepage_attribution{
		margin-bottom: 1.2em;
		margin-left: 10px;
		font-size: 0.9em;
		font-family: Georgia, serif;
}

div#nav .explore_the_exhibition {
    margin-bottom:10px;
	color: #626f76;
	font-size: 0.89em;
}

div#nav .navigation_list_heading {
    text-transform:uppercase;
	font-size: 1.25em;
	font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
	width: 220px;
	margin-top: 5px;
	margin-bottom: 8px;
}
div#nav .navigation_list_heading a {
	width: 145px;
	display: block;
	margin: 7px 0px;
	height: 13px;
    overflow:hidden;
}
div#nav .navigation_list_heading #chronology {
	background: url(/interactives/exhibitions/2010/henricartierbresson/images/navigation/chronology_sprite.gif) no-repeat 0px 0px;
}
div#nav .navigation_list_heading.active #chronology {
	background: url(/interactives/exhibitions/2010/henricartierbresson/images/navigation/chronology_sprite.gif) no-repeat 0px -13px;
}
div#nav .navigation_list_heading #chronology:hover {
	background: url(/interactives/exhibitions/2010/henricartierbresson/images/navigation/chronology_sprite.gif) no-repeat 0px -26px;
}
div#nav .navigation_list_heading #journeys {
	background: url(/interactives/exhibitions/2010/henricartierbresson/images/navigation/journeys_sprite.gif) no-repeat 0px 0px;
}
div#nav .navigation_list_heading.active #journeys {
	background: url(/interactives/exhibitions/2010/henricartierbresson/images/navigation/journeys_sprite.gif) no-repeat 0px -13px;
}
div#nav .navigation_list_heading #journeys:hover {
	background: url(/interactives/exhibitions/2010/henricartierbresson/images/navigation/journeys_sprite.gif) no-repeat 0px -26px;
}
div#nav .navigation_list_heading #themes {
	background: url(/interactives/exhibitions/2010/henricartierbresson/images/navigation/themes_sprite.gif) no-repeat 0px 0px;
}
div#nav .navigation_list_heading.active #themes {
	background: url(/interactives/exhibitions/2010/henricartierbresson/images/navigation/themes_sprite.gif) no-repeat 0px -13px;
}
div#nav .navigation_list_heading #themes:hover {
	background: url(/interactives/exhibitions/2010/henricartierbresson/images/navigation/themes_sprite.gif) no-repeat 0px -26px;
}

/*div#nav .navigation_list_heading a {*/
/*		color: #626f76;*/
/*}*/
/*div#nav .navigation_list_heading a:hover {*/
/*		color: #ffffff;*/
/*}*/
/*div#nav .navigation_list_heading.active a {*/
/*		color: #ffffff;*/
/*}*/
/*div#nav .navigation_list_heading.active a:hover {*/
/*		color: #626f76;*/
/*}*/

div#nav .navigation_list_heading.home {
		border-bottom: 1px dotted #454849;
}
div#nav .selected_item_title {
		font-size: 1.25em;
		margin: 10px 0px;
		padding: 5px 0px;
		border: 0px dotted #454849;
		border-bottom-width: 1px;
}
div#nav .selected_item_title.noborder {
		border: 0px;
		margin-bottom: -5px;
}
div#nav .selected_item_title.year_range {

}

div#nav ul { 
		margin: 0px 0px 6px 8px;
		font-size: 0.87em;
		line-height: 1.35em;
		color: #cccccc;
}
div#nav ul.decades {
		margin-bottom: 0px;
}
div#nav ul li {
		border-bottom: 1px dotted #454849;
		font-size: 1em;
		margin-top: 6px;
		padding-bottom: 4px;
		
}
div#nav ul li a {
		display: block;
		color: #cccccc;
		width: 75%;
}
div#nav ul li a:hover {
		color: #29a1e1;
}
div#nav ul li:last-child {
		border-bottom: 0px;
}

div#nav p.quote {
		margin-bottom: 10px;
	font-family: Georgia, serif;
	font-style: italic;
}
div#nav_wrapper .description_wrapper {
		margin: 10px 0px;
}
div#nav .description_wrapper.noborder {
		border-width: 0px;
}
div#nav div.attribution {
		margin-bottom: 20px;
		font-family: Georgia, serif;
}

div#nav_wrapper #about_the_maps_link {
		background: url('/interactives/exhibitions/2010/henricartierbresson/images/about_maps_button.gif') no-repeat center center;
		width: 120px;
		height: 32px;
		display: block;
		text-decoration: none;
		margin-top: 12px;
}



/*--- PAGINATION ---*/
div#nav_wrapper .read_more {
		font-size: 0.85em;
		margin-top: 10px;
}
div#nav_wrapper .read_more #read_more_link {
		background: url(/interactives/exhibitions/2010/henricartierbresson/images/navigation/read_more_blue.jpg) no-repeat 0px 2px;
		display: inline-block;
		float: left;
		width: 60px;
		height: 15px;
}

.right_col .read_more_text {
		padding-top: 50px;
		line-height: 1.5em;
		width: 430px;
		font-size: 0.8em;
}
.right_col .read_more_text p {
		margin-bottom: 0.5em;
}
.right_col .read_more_text a {
		color: #29a1e1;
}
.right_col .read_more_text a:hover {
		color: #454849;
}
#nav_wrapper .page_numbers {
		display: none;
}
#nav_wrapper #page_2, #nav_wrapper #page_3 {
		display: none;
}

div#nav_wrapper .photo_details .page_square {
  float:left;
  margin-right:3px;
  cursor:pointer;
  color: #454849;
}
div#nav_wrapper .photo_details .page_square.active {
  font-size:16px;
  font-weight:bold;
}
div#pager .page_square:hover {
	color: #29a1e1;
}

/*- end pagination -*/



div.right_col {
		margin-left: 310px;
		margin-right: 20px;
    /*width:600px; moved to js.css */
		z-index: 8;
    padding-bottom:40px;
}

div.right_col .swap_image {
		display: none;
		position: relative;
		height: 0px;
		width: 0px;
}
div.image {
		font-size: 0.5em;
}
div.right_col .thumbs {
		color: #ffffff;
		font-size: 0.5em;
}
div.right_col .image img {
		z-index: 20;

}
div.image img {
  padding-top:20px; 
  display:block;  
}


div.thumbnail_strip {
		text-align: right;
		height: 35px;
		margin-top: 10px;
}
div.thumbnail_strip .next_link, div.thumbnail_strip .previous_link  {
		padding: 0px 12px;
}

div.grid, div.landing_grid {
		margin-top: 50px;
		width:507px;
		float: left;
		text-align: right;
		color: #ffffff;
		font-size: 0em;
}


.landing_grid .tile {
		display: inline;
}
.landing_grid .tile img {
		margin: 5px;

}
.landing_grid.journeys {
		width: 640px;
}
.landing_grid.journeys .tile img {
		padding: 0px;
}

div.grid .thumbs {
		display: inline;
		padding: 5px;
}
div.grid .thumbs img {
		margin-top: 10px;
}

div.grid .thumbs.decade {
		font-size: 1.5em;
}
.right_col .image a.zoom_button {
		display: none;
		width: 55px;
		padding-top: 22px;
		height: 0px;
		margin-top: -32px;
		background: url('/interactives/exhibitions/2010/henricartierbresson/images/zoom_button_sprite.gif') 0px 0px no-repeat;
}
.right_col .image a.zoom_button:hover {
		background-position: 0px -22px;
}
#loading_gif {
	background: url('/interactives/exhibitions/2010/henricartierbresson/images/loader.gif') no-repeat;
	width: 23px;
	height: 23px;
	position: absolute;
	display: none;
	z-index: 5;
}

/*-- about the maps and credits --*/
.right_col .inner_col_left, .right_col .credits_page {
		width: 290px;
		padding-right: 40px;
		margin-right: 0px;
		line-height: 1.45em;
}

.right_col .inner_col_left {
		float: left;
		
}

.right_col .credits_page .inner_col_right {
		border: none;
}
.right_col .inner_col_right {
		width: 300px;
		float: left;
		border-left: 1px dotted #a3a3a3;
}
.right_col .credits_page .inner_col_right {
	width: 220px;
}
.right_col p {
		font-size: 0.71em;
}
.right_col .credits_page a {
		color: #29a1e1;
		text-decoration: underline;
}
.right_col a:hover {
		color: #29a1e1;
}
.right_col .inner_col_left .about_the_maps_title, .right_col .credits_title {
		margin-bottom: 10px;
}
.right_col .inner_col_left p {
		margin-bottom: 8px;
}
.about_the_maps_page .inner_col_left {
  padding-top: 15px;
}
.about_the_maps_page .inner_col_right img {
		width: 120%;
		height: 120%;
}

.right_col .inner_col_right img.credits_title, .right_col img.about_the_maps_title {
		margin-top: 15px;
}
.right_col .credits_page {
		padding-top: 30px;
		width: 650px;
		padding-bottom: 30px;
}
.credits_page .site_credits {
		margin: 25px 0px 0px 0px;
		display: block;
}
div.credits_p {
		padding-top: 10px;
		line-height: 1em;
}
div.credits_p.last {
	margin-top: 15px;
	clear: both;
}
.second_story {
		margin-bottom: 1.5em;
		margin-top: 0.5em;
		display: block;
}



 /*-- ARROWS WRAPPER --*/
.arrows_wrapper {
		margin-top: 10px;
		top: 10px;
		width: 112px;
		padding-top: 9px;
		background-color: #1a1d1f;
		color: #ffffff;
		height: 30px;
		position: absolute;
		right: 0px;
		z-index: 50;
		font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
		font-size: 1.1em;		
}
.arrows_wrapper.legend {
		background-color: #ffffff;
}
/* arrows only, no all-button */
.themes_landing .arrows_wrapper, .themes_landing_by_page .arrows_wrapper, .journey_index_default .arrows_wrapper, .journey_index .arrows_wrapper, .chronology .arrows_wrapper, .chronology_index .arrows_wrapper {
		width: 80px;
}
.arrows_wrapper.photographs {
		width: 160px;
		height: 35px;
		background-color: #29a1e1;
		padding-top: 4px;
}
.journey_index .arrows_wrapper.photographs {
		display: none;
}
.arrows_wrapper.photographs .photos_link a {
		width: 136px;
		height: 29px;
		margin-left: 5px;
		background-image: url(/interactives/exhibitions/2010/henricartierbresson/images/photographs.jpg);
		background-repeat: no-repeat;
}
.arrows_wrapper.photographs .photos_link a:hover {
		color: #000000;
}
.arrows_wrapper .all_link, .arrow_left, .arrow_right {
		float: left;
		text-align: center;
		width: 28px;
		height: 20px;
		
}
.arrows_wrapper .arrow_left {
		border-right: 1px dotted #454849;
    overflow:hidden;
}

.arrows_wrapper a {
		display: block;
		width: 25px;
		height: 19px;
		color: #ffffff;
}

.arrows_wrapper .all_link {
		border-left: 1px dotted #454849;
		padding-left: 4px;
    overflow:hidden;
}
.arrows_wrapper .all_link a {
		margin-left: 5px;
		background: url(/interactives/exhibitions/2010/henricartierbresson/images/navigation/all.png) no-repeat 0px 0px;
}
.arrows_wrapper .all_link a:hover {
		margin-left: 5px;
		background: url(/interactives/exhibitions/2010/henricartierbresson/images/navigation/all.png) no-repeat 0px -19px;
}

.arrows_wrapper .arrow_left.inactive {
		background: url(/interactives/exhibitions/2010/henricartierbresson/images/navigation/arrow_left_sprite.gif) no-repeat center 0px;
		display: none;
}
.arrows_wrapper .arrow_left a {
		background: url(/interactives/exhibitions/2010/henricartierbresson/images/navigation/arrow_left_sprite.gif) no-repeat center -20px;
}
.arrows_wrapper .arrow_left a:hover {
		background-position: center -40px;
}
.arrows_wrapper .arrow_right.inactive {
		background: url(/interactives/exhibitions/2010/henricartierbresson/images/navigation/arrow_right_sprite.gif) no-repeat center 0px;
    overflow:hidden;
	display: none;
}
.arrows_wrapper .arrow_right a {
		background: url(/interactives/exhibitions/2010/henricartierbresson/images/navigation/arrow_right_sprite.gif) no-repeat center -20px;
    overflow:hidden;
}
.arrows_wrapper .arrow_right a:hover {
		background-position: center -40px;
}

.arrows_wrapper a:hover {
		color: #29A1E1;
}
.arrows_wrapper .inactive {
		color: #aaa;
}

#seadragon {
		/*width: 500px;*/
		/*height: 500px;*/
}
 /*this is the close button of the modal window*/
#closeBut {
		color: #fff;
		position: absolute;
		right: 5px;
		top: -18px;
		width: 45px;
		z-index: 130;
		background: url('/interactives/exhibitions/2010/henricartierbresson/images/seadragon/close_button.png') no-repeat center center;
}
#nyroModalWrapper .wrapper {
		
		
}
#nyroModalClose {
		color: #ffffff;
}

.ellipses_start, .ellipses_end {
	cursor: pointer;
  color: #29a1e1;
}

/* --- FOOTER --- */

div#footer {
		float: right;
		font-size: 0.58em;
		padding-top: 10px;
		color: #858585;
    margin:20px;
    margin-top:0px;
		position: absolute;
		right: 0px;
		bottom: 0px;
		z-index: 80;
}

div#footer #warning
{
  width:50%;
  float:left;
  font-style:italic;
  color:#a96c6c;
  font-size:1.1em;
  line-height:.98em;
}
div#footer ul {
    float:left;
		line-height: 1.45em;
}
div#footer ul li {
    float: left;
    padding-left: 15px
}
div#footer ul li a {
		color: #858585;
}
div#footer ul li a:hover {
		color: #29a1e1;
}

/* - end footer - */

/* DEBUG BAR */
#sfWebDebugBar {
		display: none;
}

/* NOT FOUND */

#not_found
{
  font-size:2em;
  text-align:center;
}

/* -- toggle between kiosk version and online version -- */
.no_kiosk {
	/*elements that should not be visible on the kiosk */
	/*visibility: hidden; */
}