@charset "UTF-8";
/* CSS Document */




a:link {
	color: #EBE9DF;
	text-decoration: none;
}
a:visited { 
	color: #EBE9DF; 
	text-decoration: none;
}
a:hover { color: #EBE9DF;}
a:active { color: #EBE9DF}

*div, h1, h2, h3, h4, p, form, label, input, textarea, img, span {
	padding: 0;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	font-weight: lighter;
}

#container {
	width:776px;
	margin-right: auto;
	margin-left: auto;
	padding: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
}

#contentbox {
	width:776px;
	background-image: url(/art-museum/exhibitions/digital/methods-for-modernism/images/exhibition-tranparent-bg.png);
	background-repeat: repeat-y;
	float: left;
	margin: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
}

#logobox {
	margin-top: 18px;
	background-color: #ECE9E0;
	padding: 2px;
	height: 25px;
	width: 269px;
}

#breadcrumb {
	color: #EBE9DF;
	margin-left: 20px;
	font-family: "Helvetica Neue";
	font-size: 12px;
	margin-top: 12px;
}
#breadcrumb a:link {
	color: #EBE9DF;
	border-bottom-width: 1px;
	border-bottom-style: none;
	border-bottom-color: #EBE9DF;
}
#breadcrumb a:visited { 
	color: #EBE9DF;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #EBE9DF;}
#breadcrumb a:hover { 
	color: #EBE9DF;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #EBE9DF;}
#breadcrumba:active { 
	color: #EBE9DF;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #EBE9DF;
}


/* SIXCOLUMN */

.sixcolumn {
	width: 736px;
	color: #EBE9DF;
	margin-left: 20px;
	margin-right: 20px;
	font-family: "Chaparral Pro";
	padding: 0px;
	margin-bottom: 0px;
	height: 100%;
	clear: both;
}

.largedate {
	font-size: 36px;
	padding: 0px;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 4px;
	margin-left: 0px;
	line-height: 90%;
	color: #EBE9DF;
}

.subtitle {
	font-size: 14px;
	font-family: "Helvetica Neue", "Helvetica Neue Light", "Helvetica Neue Medium", "Helvetica Neue UltraLight", Helveica;
	margin: 0px;
	padding: 0px;
}

.largetitle {
	font-size: 70px;
	font-family: "Chaparral Pro";
	font-weight: 100;
	padding: 0px;
	line-height: 90%;
	margin-top: 50px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
}

.mediumtitle {
	font-size: 36px;
	font-family: "Chaparral Pro";
	font-weight: 100;
	padding: 0px;
	line-height: 90%;
	margin-top: 50px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
}

.animatedfeature {
	width: 736px;
	height: 319px;
	padding: 0px;
	margin-top: 20px;
	margin-right: 0px;
	margin-bottom: 30px;
	margin-left: 0px;
}

.featuresubtitle {
	font-family: "Helvetica Neue", Helvetica;
	font-size: 14px;
	color: #EBE9DF;
	margin-top: 15px;
}



/*TWO COLUMN*/
.twocolumnimageleft {
	position: relative;
	width: 232px;
	height: 352px;
	float: left;
	margin-bottom: 20px;
}
.twocolumnimageleft span {
	position: absolute;
	width: 232px;
	height: 352px;
	background-image: url(/art-museum/exhibitions/digital/methods-for-modernism/images/plus-enlarge-232x353.png);
	background-repeat: no-repeat;
}
.twocolumnimageright {
	position: relative;
	width: 232px;
	float: right;
}
.twocolumnimageright span {
	position: absolute;
	width: 101px;
	height: 27px;
	background-image: url(/art-museum/exhibitions/digital/methods-for-modernism/images/plus-enlarge-232x353.png);
	background-repeat: no-repeat;
	top: 145px;
	padding-top: 2px;
	color: #000;
	padding-left: 12px;
}
.twocolumnimagecaption {
	background-color: #EBE9DF;
	color: #000;
	font-size: 14px;
	font-weight: bold;
	width: 224px;
	padding: 4px;
	font-family: "Helvetica Neue", Helvetica;
	line-height: 120%;
}

.twocolumnfeatureleft {
	width: 232px;
	float: left;
	position: relative;
}
.twocolumnfeatureleft span {
	position: absolute;
	width: 93px;
	height: 27px;
	top: 125px;
	padding-top: 2px;
	color: #000;
	padding-left: 12px;
	line-height: 24px;
}

.twocolumnfeaturemiddle {
	width: 232px;
	position: relative;
	float: left;
	padding-left: 20px;
}
.twocolumnfeaturemiddle span {
	position: absolute;
	width: 110px;
	height: 27px;
	top: 125px;
	padding-top: 2px;
	color: #000;
	padding-left: 12px;
	line-height: 24px;
}
.twocolumnfeatureright {
	width: 232px;
	float: right;
	/* [disabled]margin-left: 20px; */
	position: relative;
}
.twocolumnfeatureright span {
	position: absolute;
	width: 58px;
	height: 27px;
	top: 125px;
	padding-top: 2px;
	color: #000;
	padding-left: 12px;
	line-height: 24px;
}
.twocolumntitle {
	font-family: "Chaparral Pro";
	font-size: 24px;
	color: #EBE9DF;
	margin-top: 15px;
	line-height: 110%;
}
.twocolumnbodycopy {
	font-family: "Helvetica Neue", Helvetica;
	font-size: 14px;
	color: #EBE9DF;
	line-height: 130%;
	margin-top: 10px;
}
.twocolumnwatchvideo {
	font-family: "Helvetica Neue", Helvetica;
	font-size: 14px;
	color: #333;
	line-height: 130%;
	background-color: #EBE9DF;
	font-weight: bold;
	height: 29px;
	width: 75px;
	padding-top: 80px;
}
.twocolumnwatchvideo span {
	position: absolute;
	width: 101px;
	height: 27px;
	background-repeat: no-repeat;
	top: 145px;
	padding-top: 2px;
	color: #000;
	padding-left: 12px;
}

.twocolumnwatchvideo a:link {
	font-family: "Helvetica Neue";
	font-size: 14px;
	font-weight: bold;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #000;
	width: 75px;
	color: #000;
}
.twocolumnwatchvideo a:visited {
	font-family: "Helvetica Neue";
	font-size: 14px;
	font-weight: bold;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #000;
	width: 75px;
	color: #000;

}
.twocolumnwatchvideo a:hover {
	font-family: "Helvetica Neue";
	font-size: 14px;
	font-weight: bold;
	border-bottom-style: none;
	width: 75px;
	color: #000;
}
.twocolumnwatchvideo a:active {
	font-family: "Helvetica Neue";
	font-size: 14px;
	font-weight: bold;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #EBE9DF;
	color: #000;
}

.twocolumnlearnmore {
	font-family: "Helvetica Neue", Helvetica;
	font-size: 14px;
	color: #333;
	line-height: 130%;
	background-color: #EBE9DF;
	font-weight: bold;
	height: 29px;
	width: 105px;
}

/* THREE COLUMN */
.threecolumnimageleft {
	width: 358px;
	height: 353px;
	position: relative;
	float:left;
}
.threecolumnimageleft span {
	width: 358px;
	height: 353px;
	position: absolute;
	background-image: url(/art-museum/exhibitions/digital/methods-for-modernism/images/plus-enlarge-358x353.png);
	background-repeat: no-repeat;
}
.threecolumnimageright {
	width: 358px;
	height: 353px;
	position: relative;
	float:right;
}
.threecolumnimageright span {
	width: 358px;
	height: 353px;
	position: absolute;
	background-image: url(/art-museum/exhibitions/digital/methods-for-modernism/images/plus-enlarge-358x353.png);
	background-repeat: no-repeat;
}
.threecolumnimagepartone {
	position: relative;
	height: 154px;
	width: 358px;
}
.threecolumnimagepartone span {
	position: absolute;
	height: 154px;
	width: 358px;
}
.threecolumnfeature {
	float: left;
	margin-top: 20px;
	width: 358px;
}
.threecolumnfeatureright {
	width: 358px;
	float: left;
	position:relative;
	padding-left: 20px;
}
.threecolumnfeatureright span {
	position: absolute;
	width: 55px;
	height: 27px;
	top: 125px;
	padding-top: 2px;
	color: #000;
	padding-left: 12px;
	line-height: 24px;
}
.threecolumnfeatureleft {
	width: 358px;
	float: left;
	position: relative;
}
.threecolumnfeatureleft span {
	position: absolute;
	width: 55px;
	height: 27px;
	top: 125px;
	padding-top: 2px;
	color: #000;
	padding-left: 12px;
	line-height: 24px;
}
.threecolumnfeatureleftmiddle	 {
	width: 358px;
	float: left;
	position: relative;
}


.threecolumnwatchvideoleft {
	font-family: "Helvetica Neue", Helvetica;
	font-size: 14px;
	color: #333;
	background-color: #EBE9DF;
	font-weight: bold;
	float: left;
}
.threecolumnwatchvideoleft span {
	width: 101px;
	height: 27px;
	padding-top: 2px;
	color: #000;
	padding-left: 12px;
	top: 145px;
}

.threecolumnwatchvideoleft a:link {
	font-family: "Helvetica Neue";
	font-size: 14px;
	font-weight: bold;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #000;
	width: 75px;
	color: #000;
}
.threecolumnwatchvideoleft a:visited {
	font-family: "Helvetica Neue";
	font-size: 14px;
	font-weight: bold;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #000;
	width: 75px;
	color: #000;

}
.threecolumnwatchvideoleft a:hover {
	font-family: "Helvetica Neue";
	font-size: 14px;
	font-weight: bold;
	border-bottom-style: none;
	width: 75px;
	color: #000;
}
.threecolumnwatchvideoleft a:active {
	font-family: "Helvetica Neue";
	font-size: 14px;
	font-weight: bold;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #EBE9DF;
	color: #000;
}


.threecolumnwatchvideoright {
	font-family: "Helvetica Neue", Helvetica;
	font-size: 14px;
	color: #333;
	background-color: #EBE9DF;
	font-weight: bold;
	float: left;
}
.threecolumnwatchvideoright span {
	width: 101px;
	height: 27px;
	padding-top: 2px;
	color: #000;
	padding-left: 12px;
	top: 145px;
}

.threecolumnwatchvideoright a:link {
	font-family: "Helvetica Neue";
	font-size: 14px;
	font-weight: bold;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #000;
	width: 75px;
	color: #000;
}
.threecolumnwatchvideoright a:visited {
	font-family: "Helvetica Neue";
	font-size: 14px;
	font-weight: bold;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #000;
	width: 75px;
	color: #000;
}
.threecolumnwatchvideoright a:hover {
	font-family: "Helvetica Neue";
	font-size: 14px;
	font-weight: bold;
	border-bottom-style: none;
	width: 75px;
	color: #000;
}
.threecolumnwatchvideoright a:active {
	font-family: "Helvetica Neue";
	font-size: 14px;
	font-weight: bold;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #EBE9DF;
	color: #000;
}
.threecolumnimageparttwo {
	position: relative;
	height: 154px;
	width: 358px;
	margin-top: 20px;
}
.threecolumnimageparttwo span {
	position: absolute;
	height: 154px;
	width: 358px;
}
.featuretitlethreecolumnhorizontal {
	font-family: "Chaparral Pro";
	font-size: 24px;
	color: #EBE9DF;
	font-weight: 100;
	margin-top: 15px;
}
.featuretitlethreecolumn {
	font-family: "Chaparral Pro";
	font-size: 36px;
	color: #EBE9DF;
	font-weight: 100;
	padding-bottom: 20px;
}
.threecolumnbodycopy {
	font-family: "Helvetica Neue", Helvetica;
	font-size: 14px;
	color: #EBE9DF;
	line-height: 130%;
	width: 358px;
}       


/* FOUR COLUMN */

.fourcolumntitle {
	font-family: "Chaparral Pro";
	font-size: 36px;
	color: #EBE9DF;
	line-height: 110%;
}
.fourcolumnbodycopy {
	font-family: "Helvetica Neue", Helvetica;
	font-size: 14px;
	color: #EBE9DF;
	line-height: 130%;
	width: 483px;
}
.fourcolumnfeature {
	width: 483px;
	margin-left: 0px;
	float: left;
	margin-right: 20px;
}

.fourcolumnfeatureright {
	width: 463px;
	margin-left: 0px;
	float: right;
	margin-right: 20px;
	margin-top: 20px;
}

.fourcolumnfeaturerightmiddle {
	width: 463px;
	margin-left: 0px;
	float: right;
	margin-right: 20px;
}

.fourcolumnfeatureleft {
	width: 483px;
	margin-left: 0px;
	float: left;
	margin-right: 20px;
}

.fourcolumnfeatureleftmiddle {
	width: 483px;
	margin-left: 0px;
	float: left;
	padding-right: 20px;
}


.fourcolumnfeatureleft p {
	font-family: "Helvetica Neue", Helvetica;
	font-size: 14px;
	color: #EBE9DF;
	margin-bottom: 20px;
	line-height: 130%;
}
.fourcolumnfeatureleft h1 {
	font-family: "Chaparral Pro";
	font-size: 36px;
	color: #EBE9DF;
	font-weight: 100;
	margin-bottom: 20px;
	padding-top: 0px;
}

.featuretitlefourcolumn {
	font-family: "Chaparral Pro";
	font-size: 36px;
	color: #EBE9DF;
	font-weight: 100;
	margin-bottom: 20px;
	padding-top: 0px;
	line-height: 110%;
}

.fourcolumnfeature p {
	font-family: "Helvetica Neue", Helvetica;
	font-size: 14px;
	color: #EBE9DF;
	margin-bottom: 20px;
	line-height: 120%;
	font-weight: lighter;
}       
.fourcolumnimageright {
	width: 484px;
	height: 353px;
	position: relative;
	float:right;
	margin-bottom: 40px;
	padding-top: 20px;
}

.fourcolumnimageright span {
	width: 484px;
	height: 353px;
	position: absolute;
	background-image: url(/art-museum/exhibitions/digital/methods-for-modernism/images/plus-enlarge-483x353.png);
	background-repeat: no-repeat;
	float:right;
	padding-top: 20px;
}


/* SIX COLUMN */

.footer {
	font-family: "Helvetica Neue";
	font-size: 13px;
	color: #EBE9DF;
	line-height: 130%;
}


/* IMAGE THUMBNAIL GRID */

.imagethumbsright-container {
	float: right;
	width: 230px;
	margin: 0px;
}

.imagethumbsrightgrid {
	position: relative;
	float: right;
	margin: 0px;
	width: 230px;
	height: 230px;
}

.imagethumbleft {
	position: relative;
	width: 116px;
	height: 116px;
	float: left;
}


/*FRONT PAGE GRID*/
.imagethumbleftone a:link, .imagethumbleftone a:visited {
  float: left;
  display: block;
  width: 115px;
  height: 115px;
  line-height: 115px;
  color: #000;
  text-decoration: none;
  background: #94B8E9 url(images/homer-grid-double.jpg) no-repeat right top;
  text-indent: 50px;
}

.imagethumbleftone a:hover {
 float: left;
 background-color: #369;
 background-position: left top;
 color: #fff;
}


.imagethumblefttwo a:link, .imagethumblefttwo a:visited {
  float: left;
  display: block;
  width: 115px;
  height: 115px;
  line-height: 115px;
  color: #000;
  text-decoration: none;
  background: #94B8E9 url(images/chase-grid-double.jpg) no-repeat right top;
  text-indent: 50px;
}

.imagethumblefttwo a:hover {
 float: left;
 background-color: #369;
 background-position: left top;
 color: #fff;
}

.imagethumbrightone a:link, .imagethumbrightone a:visited {
  float: right;
  display: block;
  width: 115px;
  height: 115px;
  line-height: 115px;
  color: #000;
  text-decoration: none;
  background: #94B8E9 url(images/marycassat-grid-double.jpg) no-repeat right top;
  text-indent: 50px;
}

.imagethumbrightone a:hover {
 float: right;
 background-color: #369;
 background-position: left top;
 color: #fff;
}

.imagethumbrighttwo a:link, .imagethumbrighttwo a:visited {
  float: right;
  display: block;
  width: 115px;
  height: 115px;
  line-height: 115px;
  color: #000;
  text-decoration: none;
  background: #94B8E9 url(images/inness-grid-double.jpg) no-repeat right top;
  text-indent: 50px;
}

.imagethumbrighttwo a:hover {
 float: right;
 background-color: #369;
 background-position: left top;
 color: #fff;
}
/*END FRONT PAGE GRID*/


/*PYRAMID GRID*/

.imagethumbleftonepyramid a:link, .imagethumbleftonepyramid a:visited {
  float: left;
  display: block;
  width: 115px;
  height: 115px;
  line-height: 115px;
  color: #000;
  text-decoration: none;
  background: #94B8E9 url(images/pyramid_001-double-230x115.jpg) no-repeat right top;
  text-indent: 50px;
}

.imagethumbleftonepyramid a:hover {
 float: left;
 background-color: #369;
 background-position: left top;
 color: #fff;
}


.imagethumblefttwopyramid a:link, .imagethumblefttwopyramid a:visited {
  float: left;
  display: block;
  width: 115px;
  height: 115px;
  line-height: 115px;
  color: #000;
  text-decoration: none;
  background: #94B8E9 url(images/pyramid_005-double-230x115.jpg) no-repeat right top;
  text-indent: 50px;
}

.imagethumblefttwopyramid a:hover {
 float: left;
 background-color: #369;
 background-position: left top;
 color: #fff;
}

.imagethumbrightonepyramid a:link, .imagethumbrightonepyramid a:visited {
  float: right;
  display: block;
  width: 115px;
  height: 115px;
  line-height: 115px;
  color: #000;
  text-decoration: none;
  background: #94B8E9 url(images/pyramid_006-double-230x115.jpg) no-repeat right top;
  text-indent: 50px;
}

.imagethumbrightonepyramid a:hover {
 float: right;
 background-color: #369;
 background-position: left top;
 color: #fff;
}

.imagethumbrighttwopyramid a:link, .imagethumbrighttwopyramid a:visited {
  float: right;
  display: block;
  width: 115px;
  height: 115px;
  line-height: 115px;
  color: #000;
  text-decoration: none;
  background: #94B8E9 url(images/pyramid_008-double-230x115.jpg) no-repeat right top;
  text-indent: 50px;
}

.imagethumbrighttwopyramid a:hover {
 float: right;
 background-color: #369;
 background-position: left top;
 color: #fff;
}

/*END PYRAMID GRID*/








.imagethumbleft span {
	position: absolute;
	background-image: url(/art-museum/exhibitions/digital/methods-for-modernism/images/plus-border-116x116.png);
	background-repeat: no-repeat;
	height: 116px;
	width: 116px;
}

.imagethumbleft  a:hover {
	position: absolute;
	background-image: url(/art-museum/exhibitions/digital/methods-for-modernism/images/plus-border-116x116.png);
	background-repeat: no-repeat;
	height: 116px;
	width: 116px;
}


.imagethumbright {
	position: relative;
	width: 116px;
	height: 116px;
	float: right;
}

.imagethumbright span {
	position: absolute;
	background-image: url(/art-museum/exhibitions/digital/methods-for-modernism/images/plus-enlarge-116x116.png);
	background-repeat: no-repeat;
	height: 116px;
	width: 116px;
}

#moreimages {
	background-color: #eae7e0;
	float: left;
	color: #333;
	font-size: 15px;
	font-family: "Chaparral Pro";
	padding-top: 8px;
	padding-right: 6px;
	padding-bottom: 6px;
	padding-left: 12px;
	text-decoration: none;
	width: 214px;
}

.imagecaptiontwocolumn {
	font-size: 13px;
	width: 220px;
	padding: 6px;
	font-family: "Helvetica Neue";
	color: #333;
	background-color: #EBE9DF;
	clear: both;
}
.imagecaptiontwocolumngrid {
	position: relative;
	float: right;
	font-size: 13px;
	width: 216px;
	font-family: "Helvetica Neue";
	color: #000;
	background-color: #EBE9DF;
	line-height: 120%;
	padding-top: 6px;
	padding-right: 6px;
	padding-bottom: 6px;
	padding-left: 8px;
	font-weight: lighter;
}
.imagecaptionthreecolumn {
	background-color: #EBE9DF;
	float: left;
	font-size: 13px;
	width: 346px;
	padding: 6px;
	font-family: "Helvetica Neue";
	color: #333;
}

.imagecaptionfourcolumn {
	background-color: #EBE9DF;
	float: left;
	font-size: 14px;
	width: 471px;
	padding: 6px;
	font-family: "Chaparral Pro";
	color: #333;
}


/* MISCELLANEOUS */

.spacertwenty {
	clear: both;
	padding-bottom: 20px;
}

.spacerforty {
	clear: both;
	padding-bottom: 40px;
}
.spacer-line {
	clear: both;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #D5CEBD;
	opacity: 0.2;
	filter: alpha(opacity=20);
	-moz-opacity: 0.2;
	width: 736px;
}

.readmore a:link {
	font-family: "Helvetica Neue";
	font-size: 14px;
	font-weight: bold;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #EBE9DF;
	width: 75px;
}
.readmore a:visited {
	font-family: "Helvetica Neue";
	font-size: 14px;
	font-weight: bold;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #EBE9DF;
	width: 75px;
}
.readmore a:hover {
	font-family: "Helvetica Neue";
	font-size: 14px;
	font-weight: bold;
	border-bottom-style: none;
	width: 75px;
}
.readmore a:active {
	font-family: "Helvetica Neue";
	font-size: 14px;
	font-weight: bold;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #EBE9DF;
	width: 75px;
}

.viewmorebox {
	position: relative;
	float: right;
	font-family: "Helvetica Neue", Helvetica;
	font-size: 14px;
	color: #333;
	line-height: 130%;
	background-color: #EBE9DF;
	font-weight: bold;
	height: 29px;
	width: 224px;
	padding-top: 6px;
	padding-left: 6px;
}
.viewmorelink {
	position: relative;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #000;
	width: 74px;
	font-size: 14px;
	color: #000;
	margin-left: 4px;
}



<!-- CSS Hover full_overlay232x200 -->
.full_overlay_232by200 {
	position:relative;
	/* Set the width and the height according to the size of your pictures */
	width:232px;
/*	height:353px;
*/}
.full_overlay_232x200 p {
	color:#FFFFFF;
	padding:10px;
}
.full_overlay_232x200 .full_overlay_232x200content {
		position: absolute;
		left: 0px;
		/* Set the width and the height according to the size of your pictures */
		width: 232px;
/*		height: 200px;
*/		/* Set a 0 opacity to hide the content */
		filter: alpha(opacity=0);
		opacity: 0;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
		/* Semi-transparent background for modern browsers, black for older browsers */
		background:#000000;
		background: rgba(0,0,0,0.8);
		/* CSS3 transitions, creates the fading effect */
		-webkit-transition: opacity 0.4s ease-in-out;
		-moz-transition: opacity 0.4s ease-in-out;
		-o-transition: opacity 0.4s ease-in-out;
		transition: opacity 0.4s ease-in-out;
	}
	.content h2, .full_overlay_232x200content p {
		/* Text styling */
		padding:10px;
		color:#ffffff;
	}
	.full_overlay_232x200:hover .full_overlay_232x200content {
		/* Setting a 100% opacity on mouse hover to show the content */
		filter: alpha(opacity=100);
		opacity: 1;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	}
<!-- END CSS Hover full_overlay_232x200 -->


<!-- CSS Hover full_overlay_358x200 -->
.full_overlay_358x200 {
	position:relative;
	/* Set the width and the height according to the size of your pictures */
	width:232px;
/*	height:353px;
*/}
.full_overlay_358x200 p {
	color:#FFFFFF;
	padding:10px;
}
	.full_overlay_358x200 .full_overlay_358x200content {
		position: absolute;
		left: 0px;
		/* Set the width and the height according to the size of your pictures */
		width: 358px;
/*		height: 200px;
*/		/* Set a 0 opacity to hide the content */
		filter: alpha(opacity=0);
		opacity: 0;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
		/* Semi-transparent background for modern browsers, black for older browsers */
		background:#000000;
		background: rgba(0,0,0,0.8);
		/* CSS3 transitions, creates the fading effect */
		-webkit-transition: opacity 0.4s ease-in-out;
		-moz-transition: opacity 0.4s ease-in-out;
		-o-transition: opacity 0.4s ease-in-out;
		transition: opacity 0.4s ease-in-out;
	}
	.content h2, .full_overlay_358x200content p {
		/* Text styling */
		padding:10px;
		color:#ffffff;
	}
	.full_overlay_358x200:hover .full_overlay_358x200content {
		/* Setting a 100% opacity on mouse hover to show the content */
		filter: alpha(opacity=100);
		opacity: 1;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	}
<!-- END CSS Hover full_overlay_232x200 -->




/*  _______________________________________

	1.a, 1.b INFORMATION BOX
    _______________________________________  */



.info {
	width: auto;
	float: left; 
	display: inline;
	padding: 0;
	position: relative;
}
	.info:hover {
		z-index: 99;
	}
.info img {
	position: relative;
	
	/* Set an opacity for the default state */
	filter: alpha(opacity=60);
	opacity: 0.6;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
}
.info:hover img{
	z-index: 999;
	
	/* Enabling a 100% opacity on mouse hover */
	filter: alpha(opacity=100);
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.details {
	position: absolute;
	left: -10px; 
	top: -10px;
	
	/* The top padding is set to 220px because the height of the demo images
	   is 200px, so we have an additional 10px on the top and at the bottom of the image */
	padding: 373px 10px 10px 10px;
	/* Set the following width according to the size of your images */
	width: 232px;
	/* Hiding the DIV */
	display: none;
	/* Rounded corners */
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
.info:hover .details {
	/* Showing on mouse hover */
	display: block;
}
/* Styling for the black variant */
.black {
	background: #000000;
}
	.black h2, .black p {
		color: #ffffff;
	}
/* Styling for the white variant */
.white {
	background: #ffffff;
}
	.white h2, .white p {
		color: #000000;
	}