/*

GLOBAL TEXT STYLES

*/
body {
	color: #666;
	background-color: #fff;
	font: 13px Helvetica, Arial, sans-serif;
}
form, select, textarea, input {
	color: #999;
	font: 11px Helvetica, Arial, sans-serif;
}
a {
	text-decoration: none;
	color: #00aeef;
}
a:hover {
	text-decoration: underline;
}
em {
	font-style: italic;
}
strong {
	font-weight: bold;
}
h1 {
	margin: 0;
	font-size: 27px;
	color: #444;
	min-height: 42px;
	padding: 13px 0 15px 15px;
}
h1 small {
	font-size: 12px;
	display: block;
	font-weight: normal;
}
h2 {
	margin: 0 0 15px 0;
	font-size: 21px;
	color: #00aeef;
}
h2.sub {
	margin: 0 0 5px 0;
}
.col-head {
	margin: 0;
	height: 40px;
	padding: 15px 0 15px 15px; 
}
.col-head img {
	width: 174px;
	height: 15px;
}
h3 {
	font-size: 13px;
	margin: 0 0 3px 0;
	font-weight: bold;
}
h4 {
	font-size: 12px;
	color: #333;
	margin: 0 0 3px 0;
	font-weight: normal;
}
p {
	line-height: 1.4;
	margin: 0 0 15px 0;
}
ul {
	list-style: square;
	line-height: 1.4;
	margin: 0 0 10px 20px;
}
ol {
	list-style: decimal;
	line-height: 1.4;
	margin: 0 0 10px 20px;
}
/*

GRID/LAYOUT STYLES

*/

.col {
	width: 189px;
	float: left;
}
.dubs {
	width: 378px;
}
.trips {
	width: 567px;
}
.quad {
	width: 760px;
}
.quad {
	width: 756px;
}
.copy-block {
	margin: 0 0 30px 15px;
}
/*

CONTAINER RELATED STYLES

*/

#container {
	margin: 0 auto;
	width: 960px;
	overflow: hidden;
	background: #fff url(../img/bg-barber-shop-lines.gif) no-repeat top left;
}
/*

HEADER RELATED STYLES

*/

#header {
	position: relative;
	margin: 30px 0 0 0;
	padding: 0 0 20px 0;
	background: url(../img/bg-header.gif) no-repeat bottom left;
}
#logo {
	padding: 5px 0 12px 14px;
	width: 225px;
	height: 90px;
	margin: 0;
	display: block;
}
#nav-global {
	height: 45px;
	overflow: hidden;
	background: #000 url(../img/bg-nav-global.gif);
	border-top: 13px solid #e6e6e6;
	padding-left: 195px;
}
#nav-global li {	
	list-style: none;
	float: left;
}
#nav-global a {
	display: block;
	float: left;
	padding: 50px 32px 0 0;
	background-image: url(../img/bg-nav-global-btns.gif);
	background-repeat: no-repeat;
}
#nav-global li.home a {	
	width: 35px;
	background-position: 0 0;
}
#nav-global li.museum a {	
	width: 79px;
	background-position: -68px 0;
}
#nav-global li.exhibitions a {	
	width: 75px;
	background-position: -182px 0;
}
#nav-global li.events a {	
	width: 45px;
	background-position: -295px 0;
}
#nav-global li.education a {	
	width: 67px;
	background-position: -380px 0;
}
#nav-global li.partners a {	
	width: 63px;
	background-position: -483px 0;
}

#nav-global li.home a:hover, #nav-global li.home a.selected {	
	background-position: 0 -45px;
}
#nav-global li.museum a:hover, #nav-global li.museum a.selected {
	background-position: -68px -45px;
}
#nav-global li.exhibitions a:hover, #nav-global li.exhibitions a.selected {	
	background-position: -182px -45px;
}
#nav-global li.events a:hover, #nav-global li.events a.selected {	
	background-position: -295px -45px;
}
#nav-global li.education a:hover, #nav-global li.education a.selected {
	background-position: -380px -45px;
}
#nav-global li.partners a:hover, #nav-global li.partners a.selected {	
	background-position: -483px -45px;
}





/* NL */
body.nl #nav-global {
	padding-left: 155px;
}
body.nl #nav-global a {
	background-image: url(../img/bg-nav-global-btns-nl.gif);
}
body.nl #nav-global li.home a {	
	width: 35px;
	background-position: 0 0;
}
body.nl #nav-global li.museum a {	
	width: 79px;
	background-position: -69px 0;
}
body.nl #nav-global li.exhibitions a {	
	width: 130px;
	background-position: -181px 0;
}
body.nl #nav-global li.events a {	
	width: 79px;
	background-position: -350px 0;
}
body.nl #nav-global li.education a {	
	width: 69px;
	background-position: -466px 0;
}
body.nl #nav-global li.partners a {	
	width: 63px;
	background-position: -572px 0;
}


body.nl #nav-global li.home a:hover, body.nl #nav-global li.home a.selected {	
	background-position: 0 -45px;
}
body.nl #nav-global li.museum a:hover, body.nl #nav-global li.museum a.selected {
	background-position: -69px -45px;
}
body.nl #nav-global li.exhibitions a:hover, body.nl #nav-global li.exhibitions a.selected {	
	background-position: -181px -45px;
}
body.nl #nav-global li.events a:hover, body.nl #nav-global li.events a.selected {	
	background-position: -350px -45px;
}
body.nl #nav-global li.education a:hover, body.nl #nav-global li.education a.selected {
	background-position: -466px -45px;
}
body.nl #nav-global li.partners a:hover, body.nl #nav-global li.partners a.selected {	
	background-position: -572px -45px;
}



#nav-languages {
	position: absolute;
	top: 0px;
	left: 775px;
	margin: 0;
}
#nav-languages a {
	color: #999;
	font-size: 10px;
	text-transform: uppercase;
}
#nav-languages a:hover, #nav-languages a.selected {
	color: #333;
}
#frm-search {
	position: absolute;
	top: 25px;
	left: 775px;
}
#frm-search .txt {
	border: 1px solid #d4d4d4;
	border-top: 2px solid #999;
	font: 11px Arial, sans-serif;
	color: #333;
	width: 125px;
	height: 10px;
	padding: 2px 2px 0 2px;
	
}
#frm-search .btn {
	background: #c7c7c7 url(../img/bg-btn-search.gif) repeat-x;
	border: 0;
	color: #fff;
	width: 43px;
	height: 15px;
	padding: 0;
	font-size: 10px;
}
#nav-utility {
	position: absolute;
	top: 55px;
	left: 775px;
	margin: 0;
	list-style: none;
}
#nav-utility a {
	color: #333;
	font-size: 11px;
	text-transform: uppercase;
}
#nav-utility li.blog a {
	color: #ff0066;
}	
/*

CONTENT RELATED STYLES

*/

#content {
	padding: 0 0 15px 0;
	background: url(../img/bg-content.gif) repeat-y;
	overflow: hidden;
	height: 100%;
}
#nav-local {
	margin: 0 0 0 0;
	padding: 0 0 0 15px;
}
#nav-local ul {
	margin: 0;
}
#nav-local li {
	list-style: none;
	margin-bottom: 15px;
}
#nav-local li li {
	margin-bottom: 0;
}
#nav-local h2 {	
	margin: 0;
	border-bottom: none;
}
#nav-local a {
	display: block;
	color: #333;
	font-size: 13px;
}
#nav-local li li a {
	color: #999;
}
#nav-local a.selected, #nav-local a:hover {
	color: #00aeef;
	text-decoration: none;
}

/* 

RIGHT COLUMN CALLOUTS

*/
.callout {
	margin: 0 0 15px 15px;
	padding: 15px;
	color: #333;
	background-color: #51b5ce;
	font-size: 12px;
}
.callout a {
	color: #fff;
}
.callout small {
	display: block;
}
.callout small a {
	font-size: 10px;
	font-weight: bold;
}
.callout h3 {
	font-weight: bold;
	margin: 0 0 15px 0;
	font-size: 13px;
}
.callout p {
	line-height: 1.3;
	margin: 0 0 5px 0;
}

/*

EVENT INDICATORS

Note: event container can be a most any tag (even and anchor).

*/
.event {
	position: relative;
	color: #fff;
	margin: 0 0 15px 15px;
	display: block;
	font-weight: normal;
	line-height: 1;
	font-size: 15px;
	background-color: #450fd8;
}
.event .description {
	width: 102px;
	display: block;
	border-left: 52px solid #000;
	padding: 12px 10px;
	min-height: 28px;
}
.event a {
	color: #fff;
}
a.event:hover .date {
	text-decoration: none;
}
.event .date {
	position: absolute;
	top: 12px;
	left: 7px;
	text-transform: uppercase;
	font-size: 17px;
}
.event .date small {
	display: block;
	font-size: 11px;
	margin-bottom: 2px;
}

/* 

IMAGE WITH CAPTION WITHIN COPY

*/
.image-caption {	
	display: block;
	float:right;
	margin: 3px 0 15px 15px;
	width: 174px;
	font-size: 11px;
	line-height: 1;
	color: #999;
}
.image-caption img {
	display: block;
	margin: 0 0 7px 0;
}
.image-caption em {
	display: block;
	margin-top: 10px;
	padding: 0 0 10px 0;
	font-style: normal;
}

/*

LINKED IMAGES WITH OPAQUE TITLE (OVERLAY), CAN ALSO HAVE CAPTION

2 SIZES: default (thumb) = 174 wide x 135 high and banner = 552 wide x VARIABLE height

*/

.image-text {
	display: block;
	width: 174px;
	height: 135px;
	overflow: hidden;	
	position: relative;
	float: left;
	margin: 0 0 15px 15px;
	color: #fff;
	font-size: 12px;
	line-height: 1;
	text-transform: uppercase;
} 
.image-text .mask {
	height: 135px;
	overflow: hidden;
	display: block;
}
.image-text a {
	color: #fff;
}
.image-text .overlay {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	padding: 10px;
	width: 154px;
	background: url(../img/bg-image-overlay.png);
	font-weight: bold;
}
.image-text .overlay small {
	display: block;
	margin-top: 3px;
	text-transform: none;
	font-size: 11px;
	font-weight: normal;
}
.banner {
	width: 552px;
	height: auto;
	font-size: 21px;
	float: none;
}
.banner .mask {
	height: 270px;	
}
.banner .caption {
	display: block;
	padding: 7px 0 15px 0;
	color: #999;
	font-size: 11px;
	text-transform: none;
}
.banner .overlay {
	width: 522px;
	padding: 15px;
}
.banner .overlay small {
	font-size: 15px;
	margin-top: 5px;
}

/*

BARBER SHOP BORDER: adds 15px bottom padding to the element and applies the barber shop angle bg image

*/
.barber-shop-border {
	padding-bottom: 15px;
	background: url(../img/bg-barber-shop-lines.gif) bottom left no-repeat;
}

/*

FOOTER RELATED STYLES

*/

#footer {
	padding: 20px 0 30px 15px;
	font-size: 10px;
	color: #999;
	background: url(../img/bg-content.gif) repeat-y;
}
#footer p {
	line-height: 1.3;
}
#footer a {
	padding: 0 0 0 0;
	color: #999;
}

#social-media-links { list-style: none; }
#social-media-links li { float: left; width: 16px; margin: 0 5px 0 0; }
#social-media-links li a { display: block; height: 16px; background: url(../img/social-media-links.png) no-repeat top left; text-indent: -9999px; }
#social-media-links li.hyves a { background-position: 0 0; }
#social-media-links li.hyves a:hover { background-position: 0 -16px; }
#social-media-links li.twitter a { background-position: -16px 0; }
#social-media-links li.twitter a:hover { background-position: -16px -16px; }
#social-media-links li.flickr a { background-position: -32px 0; }
#social-media-links li.flickr a:hover { background-position: -32px -16px; }
#social-media-links li.facebook a { background-position: -48px 0; }
#social-media-links li.facebook a:hover { background-position: -48px -16px; }
#social-media-links li.iphone a { background-position: -64px 0; }
#social-media-links li.iphone a:hover { background-position: -64px -16px; }

/*

REUSEABLE HORIZONTAL UTILIY/NAV STYLES

*/
.nav-horizontal li {
	display: inline;
	list-style: none;
}
.nav-horizontal li.pipe {
	padding: 0 5px;
}

/*

HOMEPAGE

Note: the col-home-main, col-events and col-blog IDs provide handles to style and in some cases override existing styles...

*/

/*

HOME HEADER ROW

*/
#home-header-row {
	height: 55px;
	margin-bottom: 15px;
	background: url(../img/bg-header.gif) repeat-y top left;
	overflow: hidden;
}

/*

MAIN HOME COLUMN

*/
#col-home-main .image-text, #col-home-main .image-text .mask {
	height: 70px;
}
#col-home-main .banner, #col-home-main .banner .mask {
	height: 270px;	
}

/*

KIDS CALLOUT

*/
.callout-kids {
	margin: 0 0 15px 15px;
	color: #58c300;
	background-color: #efefef;
}
.callout-kids .copy {
	padding: 15px;
	color: #333;
}
.callout-kids a {
	color: #58c300;
	display: block;
	font-size: 15px;
	margin: 0 0 3px 0;
	padding: 0 0 0 20px;
	background: url(../img/icon-kids-callout-link.gif) no-repeat 0 -1px;
}
.callout-kids h3 {
	margin: 0;
	height: 50px;
	width: 174px;
}

/*

NEWS CALLOUT

*/
.callout-news {
	margin: 0 0 15px 15px;
	background-color: #efefef;
	display: block;
}
.callout-news a {
	display: block;
}
.callout-news h3 {
	margin: 0;
	height: 50px;
	width: 174px;
}

/*

BLOG COLUMN CALLOUT

*/
.callout-blog {
	margin: 0 0 15px 15px;
	padding: 15px;
	background-color: #efefef;
	color: #ff0066;
	font-size: 12px;
}
.callout-blog a {
	color: #ff6fac;
	display: block;
	padding-bottom: 7px;
	margin-bottom: 7px;
	border-bottom: 1px solid #d7d7d7;
}

.callout-blog a strong {
	color: #ff0066;
	font-size: 10px;
}
.callout-blog .last {
	border-bottom: none;
}
.callout-blog a.blog { color: #959595!important; }
.callout-blog a.blog strong { color: #959595; }



.callout-collection { margin: 0 0 15px 15px; padding-bottom: 20px!important; background-color: #efefef; display: block; }
.callout-collection ul { margin: 0; padding: 10px 15px 5px 15px; list-style: none; }
.callout-collection ul li { padding: 5px 0; font-size: 12px; color: #666666; font-weight: bold; border-top: 1px solid #d7d7d7; }
.callout-collection ul li.first { padding-top: 0; border: 0; }
.callout-collection ul li a { color: #666666; text-decoration: none; }

.callout-exhibition-online { margin: 0 0 15px 15px; background-color: #000; }
.callout-exhibition-online a { display: block; height: 100%; padding: 15px; font-size: 12px; color: #fff!important; font-weight:bold; }


/*

CONTACT FORM

*/
.form {
	margin: 0 0 15px 15px;
	padding: 15px 0 20px 0;
	font-size: 12px;
}
.form .dubs {
	width: 363px;
}
.form fieldset {
	margin: 0 0 7px 0;
}
.form .section {
	margin-top: 30px;
}
.form .prompt {
	display: block;
	padding: 5px 10px 0 20px;
	color: #333;
}
.form .required {
	background: url(../img/icon-required.gif) no-repeat 10px 5px;
}
.form .denotes-required {
	color: #999;
}
.form textarea {
	border: 1px solid #d4d4d4;
	border-top: 2px solid #999;
	font: 12px Arial, sans-serif;
	color: #333;
	width: 250px;
	height: 101px;
	padding: 1px 2px;
	font-size: 12px;
}
.form .txt {
	border: 1px solid #d4d4d4;
	border-top: 2px solid #999;
	font: 12px Arial, sans-serif;
	color: #333;
	width: 250px;
	height: 18px;
	padding: 2px 2px 0 2px;
}
.form .sel {
	border: 1px solid #d4d4d4;
	border-top: 2px solid #999;
	font: 12px Arial, sans-serif;
	color: #333;
	width: 254px;
	padding: 2px;
}
.form .choice {
	position: relative;
	padding: 0 10px 0 22px;
	display: block;
	float: left;
}
.form .choice label {
	padding-top: 6px;
	display: block;
}
.form .choice input {
	position: absolute;
	top: 0;
	left: 0;	
}
.form .buttons {
	text-align: right;
	padding-bottom: 15px;
}
.form .btn {
	border: none;
	width: 120px;
	height: 33px;
	padding: 2px 0 0 10px;
	color: #fff;
	background: #a3a3a3 url(../img/bg-btn.gif) no-repeat;
	font-size: 16px;
	text-align: left;
}
.form .submit {
	background-image: url(../img/bg-btn.gif);
	background-color: #5ec1f3;
	background-position: 66px;
	margin-right: 15px;
}
.bg-gray {
	background-color: #e0e0e0;
}

.form div.error {
	margin: 5px 0 0 0;
	padding: 0 0 0 16px;
	font-weight: bold;
	color: #ff7c00;
	background: url(../img/frm_error_ico.gif) no-repeat left top;
}

/*

DATA TABLE

*/
.datatable {
	margin: 0 0 15px 0;
	width: 552px;
	overflow: hidden;
}
.datatable h2 {
	margin: 15px 0 10px 0;
}
.datatable table {
	width: 567px;
}
.datatable th {
	border-bottom: 1px solid #999;
	padding: 5px 15px 3px 0;	
	width: 174px;
	font-size: 13px;
	margin: 0 0 3px 0;
	font-weight: bold;
}
.datatable td {
	border-bottom: 1px solid #ccc;
	padding: 5px 15px 3px 0;
	width: 174px;
}
.datatable td.last, .datatable th.last { padding-right: 0; }


.datatable .dubs {
	width: 368px;
}

/*

PAGER

*/
.pager {
	margin: 0 0 0 15px;
	font-size: 11px;
}
.pager h5, .pager a, .pager span {
	float: left;
	display: block;
	padding: 5px;
}
.pager h5 {
	padding-left: 0;
}

/*

COLOR THEME: OCEAN

*/
.callout, .event {
	background-color: #00a8c9;
}
.bg2 {
	background-color: #3062d5;
}
.bg3 {
	background-color: #1f21e4;
}
.bg4 {
	background-color: #450fd8;
}
h2, a, #nav-local .selected, #nav-local a:hover, .callout-kids a {
	color: #00aeef;
}
.form .submit {
	background-position: 0 -66px;
}


/*

COLOR THEME: DESERT

*/
body.desert .callout, body.desert .event {
	background-color: #ff7c00;
}
body.desert .bg2 {
	background-color: #ff0000;
}
body.desert .bg3 {
	background-color: #d00015;
}
body.desert .bg4 {
	background-color: #ff3700;
}
body.desert h2, body.desert a, body.desert #nav-local .selected, body.desert #nav-local a:hover, .callout-kids a {
	color: #ff7c00;
}
body.desert .form .submit {
	background-position: 0 -33px;
}

/*

COLOR THEME: FOREST

*/
body.forest .callout, body.forest .event {
	background-color: #00a500;
}
body.forest .bg2 {
	background-color: #375f1b;
}
body.forest .bg3 {
	background-color: #006b24;
}
body.forest .bg4 {
	background-color: #00ec00;
}
body.forest h2, body.forest a, body.forest #nav-local .selected, body.forest #nav-local a:hover, .callout-kids a  {
	color: #00a500;
}
body.forest .form .submit {
	background-position: 0 0;
}

/*

COLOR THEME OVERRIDES - for example, callout links still need to be white, callout-blog still needs pink text, and the kids callout always has green links

*/
body.ocean .callout a, body.desert .callout a, body.forest .callout a,
body.ocean .event a, body.desert .event a, body.forest .event a, 
body.ocean .image-text, body.desert .image-text, body.forest .image-text,
body.ocean .image-text a, body.desert .image-text a, body.forest .image-text a {
	color: #fff !important;
}
body.ocean .callout-blog a, body.desert .callout-blog a, body.forest .callout-blog a {
	color: #ff6fac;
}
body.ocean .callout-kids a, body.desert .callout-kids a, body.forest .callout-kids a {
	color: #58c300;
}