/*
** CSS sprites:
** two state   => top=normal,bottom=roll
** three state => top=normal,middle=roll,bottom=here
*/

body, html {
	height: 100%;
}

html {
	overflow-y: scroll; /* force vertical scrollbar */
}

body {
	background: white;
	color: #404040;
}

.inner960 {
	width: 960px;
	margin-left: auto;
	margin-right: auto;
}

.col-310 {
	width: 310px;
}

.col-255 {
	width: 255px;
}

.col-200 {
	width: 200px;
}

/*
**
*/

#bg-colors {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 0;
}

#bg-colors > * {
	outline: 0px dotted yellow;
}

#bg-colors .c0 {
	display: block;
	width: 100%;
	height: 78px;
	background: #ffffff;
}

#bg-colors .c1l {
	float: left;
	display: block;
	width: 50%;
	height: 133px;
	background: #dbdbdb;
}

#bg-colors .c1r {
	float: right;
	display: block;
	width: 50%;
	height: 133px;
	background: #000000;
}

#bg-colors .c2l {
	display: none;
}

#bg-colors .c2r {
	display: none;
}

#bg-colors .c3 {
	display: none;
}

body.S0 #bg-colors .c1l {
	height: 178px;
}

body.S0 #bg-colors .c1r {
	height: 178px;
}

body.S0 #bg-colors .c2l {
	clear: right;
	float: left;
	display: block;
	width: 50%;
	height: 280px;
	background: #c0311a;
}

body.S0 #bg-colors .c2r {
	float: right;
	display: block;
	width: 50%;
	height: 280px;
	background: #300c07;
}

body.S0 #bg-colors .c3 {
	clear: both;
	display: block;
	height: 220px;
	background: #ffffff;
}

/*
**
*/

#bg-images {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 0;
}

#bg-images > * {
	outline: 0px dotted green;
}

#bg-images .i0 {
	display: block;
	height: 78px;
	background: #ffffff;
}

#bg-images .i1 {
	display: block;
	height: 133px;
}

#bg-images .i2 {
	display: none;
}

#bg-images .i3 {
	display: none;
}

body.S0 #bg-images .i1 {
	height: 178px;
}

body.S0 #bg-images .i2 {
	display: block;
	height: 280px;
	background: url(../_images/banners/serramiddle_duotone.png) center bottom no-repeat; /*url(../_images/red_bar_home_image.png) center bottom no-repeat;*/
}

body.S0 #bg-images .i3 {
	display: block;
	height: 220px;
	background: url(../_images/banners/serrabottom_duotone.png) center bottom no-repeat; /*url(../_images/home_back_image_bottom.png) center bottom no-repeat;*/
}

body.S0 #bg-images .i1 { background: url(../_images/banners/serratop_duotone2.png) center bottom no-repeat; /*url(../_images/home_back_image_top.png) center bottom no-repeat;*/ }
body.S1 #bg-images .i1 { background: url(../_images/visit_bar_image.png) center bottom no-repeat; }
body.S2 #bg-images .i1 { background: url(../_images/banners/exhibitionsbanner1.png) center bottom no-repeat; /*background: url(../_images/exhibitions_bar_image.png) center bottom no-repeat;*/ }
body.S3 #bg-images .i1 { background: url(../_images/banners/collectionbanner1.png) center bottom no-repeat; /*background: url(../_images/collections_bar_image.png) center bottom no-repeat;*/ }
body.S4 #bg-images .i1 { background: url(../_images/banners/learnbanner1.png) center bottom no-repeat; } /*{ background: url(../_images/learn_bar_image.png) center bottom no-repeat; }*/
body.S5 #bg-images .i1 { background: url(../_images/interact_bar_image.png) center bottom no-repeat; }
body.S6 #bg-images .i1 { background: url(../_images/about_bar_image.png) center bottom no-repeat; }
body.S7 #bg-images .i1 { background: url(../_images/get_involved_bar_image.png) center bottom no-repeat; }
body.S8 #bg-images .i1 { background: url(../_images/press_room_bar_image.png) center bottom no-repeat; }
body.S9 #bg-images .i1 { background: url(../_images/contact_bar_image.png) center bottom no-repeat; }
body.S10 #bg-images .i1 { background: url(../_images/banners/multimediabanner1.png) center bottom no-repeat; /*background: url(../_images/multimedia_bar_image.png) center bottom no-repeat;*/ }

/*
**
*/

#wrapper {
	min-height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 2;
}

/*
**
*/

header {
	height: 207px;
}

header .inner960 {
	position: relative;
	height: 207px;
	outline: 0px dotted red;
}

header .inner960 > * {
	outline: 0px dotted purple;
}

/*
**
*/

a#cma-logo {
	position: absolute;
	display: block;
	top: 20px;
	left: 180px;
	width: 147px;
	height: 69px;
	background: transparent url(../_images/cma_logo.png) left top no-repeat;
}

/*
**
*/

nav#primary {
	position: absolute;
	display: block;
	top: 82px;
	left: 0;
}

nav#primary ul {
	margin: 0;
	padding: 0;
}

nav#primary ul li {
	margin: 1px 0 0 0;
	padding: 0;
}

nav#primary ul li.first {
	margin: 0;
}

nav#primary ul li a {
	display: block;
	margin: 0;
	padding: 0;
	width: 174px;
	height: 17px;
	background-repeat: no-repeat;
}

nav#primary ul li a:link, nav#primary ul li a:visited { background-position: right top; }
nav#primary ul li a:hover, nav#primary ul li a:active { background-position: right center; }
nav#primary ul li a.here                          { background-position: right bottom; }
 
nav#primary ul li#p1 a { background-image: url(../_images/visit_link.png);       width: 43px;  margin-left: 131px; }
nav#primary ul li#p2 a { background-image: url(../_images/exhibitions_link.png); width: 174px; margin-left: 0;     }
nav#primary ul li#p3 a { background-image: url(../_images/collections_link.png); width: 103px; margin-left: 71px;  }
nav#primary ul li#p4 a { background-image: url(../_images/learn_link.png);       width: 54px;  margin-left: 120px; }
nav#primary ul li#p5 a { background-image: url(../_images/interact_link.png);    width: 77px;  margin-left: 97px;  }
nav#primary ul li#p6 a { background-image: url(../_images/about_link.png);       width: 56px;  margin-left: 118px; }
nav#primary ul li#p7 a { background-image: url(../_images/shop_link.png);        width: 44px;  margin-left: 130px; }

body.S0 nav#primary ul li#p0 a { background-position: right bottom; }
body.S1 nav#primary ul li#p1 a { background-position: right bottom; }
body.S2 nav#primary ul li#p2 a { background-position: right bottom; }
body.S3 nav#primary ul li#p3 a { background-position: right bottom; }
body.S4 nav#primary ul li#p4 a { background-position: right bottom; }
body.S5 nav#primary ul li#p5 a { background-position: right bottom; }
body.S6 nav#primary ul li#p6 a { background-position: right bottom; }

/*
**
*/

nav#secondary {
	position: absolute;
	display: block;
	top: 50px;
	right: 0px;
}

nav#secondary ul {
	margin: 0;
	padding: 0;
	font-size: 0.9em;
}

nav#secondary ul li {
	float: left;
	margin: 0 0 0 13px;
	padding: 0;
	text-transform: uppercase;
}

nav#secondary ul li a {
	color: #666666;
}

/*
**
*/

#hours {
	position: absolute;
	display: block;
	top: 67px;
	right: 0px;
	width: 85px;
	height: 62px;
	background: transparent left top no-repeat;
}

#hours.sunday { background-image: url(../_images/open_sunday.png); }
#hours.monday { background-image: url(../_images/closed_monday.png); }
#hours.tuesday { background-image: url(../_images/open_tuesday.png); }
#hours.wednesday { background-image: url(../_images/open_wednesday.png); }
#hours.thursday { background-image: url(../_images/open_thursday.png); }
#hours.friday { background-image: url(../_images/open_friday.png); }
#hours.saturday { background-image: url(../_images/open_saturday.png); }

div#userLinks {
	position: absolute;
	top: 3px;
	right: 0;
	color: #999999;	
}

div#userLinks a {
	color: #999999;	
}

div#search_site {
	position: absolute;
	top: 20px;
	right: 0;
}

div#search_site input#search-input {
	display: block;
	float: left;
	border: 1px solid #AAAAAA;
	width: 121px;
	height: 16px; /* 16 + 4(padding) + 2(border) = 22 */
	padding: 2px 6px;
	text-align: right;
	color: #999999;
}

div#search_site input#search-submit {
	display: block;
	float: left;
	background-image: url(../_images/search_button.png);
	width: 22px;
	height: 22px;
	border: 0 none;
	cursor: pointer;
}

/*
form#search {
	position: absolute;
	top: 20px;
	right: 0;
}

form#search input#search-input {
	display: block;
	float: left;
	border: 1px solid #AAAAAA;
	width: 121px;
	height: 16px;  16 + 4(padding) + 2(border) = 22 
	padding: 2px 6px;
	text-align: right;
	color: #999999;
}

form#search input#search-submit {
	display: block;
	float: left;
	background-image: url(../_images/search_button.png);
	width: 22px;
	height: 22px;
	border: 0 none;
	cursor: pointer;
}
*/

/*
**
*/

#page {
}

#page .inner960 {
	outline: 0px dotted red;
}
/*
**
*/

footer {
	clear: both;
	margin-top: 35px;
	background: #383838;
	color: #CCCCCC;
}

footer .inner960 {
	outline: 0px dotted red;
}

footer .inner960 > * {
	outline: 0px dotted purple;
}

footer .col {
	float: left;
	margin-left: 35px;
	padding: 15px 0;
}

footer .col.first {
	margin-left: 0;
}

footer h1 {
	font-family: Arial, Helvetica, sans-serif;
	margin: 0 0 12px 0;
	font-size: 1.1em;
	font-weight: bold;
	text-transform: uppercase;
	color: white;
}

footer ul {
	margin: 0 0 10px 0;
	padding: 0;
	font-size: 1.1em;
}

footer p {
	margin: 0 0 10px 0;
	font-size: 1.1em;
}

footer address {
	font-size: 1em;
}

footer a {
	color: #FFFFFF;
}

footer a {
}

footer a:link, footer a:visited {
	color: #FFFFFF;
	text-decoration: underline;
}

footer a:hover, footer a:active {
	color: #FFFFFF;
	text-decoration: underline;
}

footer ul#social {
	list-style-type: none;
	line-height: 1;
}

footer ul#social li {
	float: left;
	display: block;
	margin: 0 5px 0 0;
	padding: 0;
	width: 19px;
	height: 19px;
}

footer ul#social a {
	display: block;
	width: 19px;
	height: 19px;
}

footer ul#social a.facebook  { background: url(../_images/FB-Icon-S.png) left top no-repeat; }
footer ul#social a.twitter   { background: url(../_images/Twitter-Icon-S.png) left top no-repeat; }
footer ul#social a.instagram { background: url(../_images/Instagram-Icon-S.png) left top no-repeat; }
footer ul#social a.pinterest  { background: url(../_images/Pinterest-Icon-S.png) left top no-repeat; }
footer ul#social a.vimeo { background: url(../_images/Vimeo-Icon-S.png) left top no-repeat; }

footer ul#connect {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

footer ul#connect li {
	margin: 3px 0;
	padding: 0 0 0 20px;
	text-transform: uppercase;
}

footer ul#connect li.share {
	background: url(../_images/share_icon.png) left center no-repeat;
}

footer ul#connect li.newsletter {
	background: url(../_images/newsletter_icon.png) left center no-repeat;
}

footer ul#connect li.contact {
	background: url(../_images/contact_icon.png) left center no-repeat;
}