@charset "utf-8";
body { margin:0; padding:0; width:100%; background:#e1dddc; font-family:Arial, Helvetica, sans-serif;}
html { padding:0; margin:0;}

h1 {color:#384054; font-size:18px; margin:0px;}

.main { margin:0 auto; padding:0; background:#e1dddc; }
.resize { width:960px; padding:0; margin:0 auto;}
/********** header **********/
.header_resize {background: url(images/header_bg.png); background-repeat:repeat-x; margin:0; padding:0; height:168px;}
.header { width:960px; padding:0; margin:0 auto; }
.header_blog { padding:15px 0 !important; padding:15px 0 7px 0; margin:0 auto; width:960px;}
.header_blog .social { border-right:1px solid #919ead; width:120px; float:left; font:normal 12px Arial, Helvetica, sans-serif; color:#ecece3; padding:10px 10px 10px 0; margin:0;}
.header_blog .social img { float:left; margin:0 2px; padding-left:10px;}
.header_blog .text { width:220px; float:left; margin:0; padding:0px 0 0 45px; border-right:1px solid #919ead;}
.header_blog .text p { font: bold 14px Arial, Helvetica, sans-serif; color:#384054; padding:0; margin:0;  line-height:20px;}
.header_blog .text p span { font: bold 14px Arial, Helvetica, sans-serif; color:#954848; padding:0; margin:0;  line-height:20px; text-align:center;}
.header_blog .enews { border-right:1px solid #919ead; width:120px; float:left; font:normal 12px Arial, Helvetica, sans-serif; color:#ecece3; margin:0; text-align:center;}
.header_blog .donate { width:150px; float:left; font:normal 12px Arial, Helvetica, sans-serif; color:#ecece3; margin:0; padding-left:10px; text-align:center;}

/* logo */
.logo {padding:0; margin-left:-50px; width:561px; float:left;}
.img { padding:20px 0 0 0; margin:0 ; width:410px;  float:right; }

/*menu*/
.menu { width:999px;  float:left; background-image:url(images/menuBG.png); background-repeat:no-repeat; }
.menu ul { text-align: center;  padding-left:10px; list-style:none; border:0; float:left;}
.menu ul li { float:left; margin:0; padding:0 5px; border:0;}
.menu ul li a { float:left; margin:0; padding:12px; color:#fff; font:normal 11px Arial, Helvetica, sans-serif; text-decoration:none; text-transform:uppercase;}
.menu ul li a:hover { color:#CFF; text-decoration:none;}
.menu ul li a.active { color:#CFF; text-decoration: underline;}
/* body */
.body_resize  { padding:0; background:url(images/mainBorder.jpg); width:975px; margin:0 auto;}
.body_border-top  { padding:0; background:url(images/topBorder.jpg); width:975px; height:6px; margin:0 auto;}
.body_border-btm  { padding:0; background:url(images/btmBorder.jpg); width:975px; height:6px; margin:0 auto;}
.body { padding:0; margin:0 auto; }
.body h2 {color:#384054; font-size:14px; margin:0px;}
.body h3 { font:normal 30px Arial, Helvetica, sans-serif; color:#515151; border-bottom:1px solid #d0d0d0; padding:20px 5px; margin:0 20px;}
.body p { font:normal 11px Arial, Helvetica, sans-serif; color:#384054; line-height:1.8em; padding:3px 5px; margin:0;}
.body a { color:#8f3200; text-decoration:underline;}
.body img { margin:5px auto; padding:0;}
.body img.floated { float:left; margin:10px; padding:0;}
.right { width:280px; margin:10px 20px 10px 0; padding:0; float:right;}
.left {width:560px; margin:10px 0 10px 20px; padding:0; float:left;}
.port { width:296px; margin:0; padding:10px; float:left;}


.content {padding-left:30px; padding-right:30px; min-height:500px; color:#666;}
.content a {color:#666;}
.content a:hover {color:#384054;}
.content #header {width:880px; height:40px; color:#384054; font-size:28px; font-weight:normal; border-bottom:1px solid #333; padding:20px 15px 0px 0px; float:left; text-align:left;}
.content #share {width:150px; height:30px; float:right; text-align:right; font-size:12px; padding-top:-20px; margin-top:-10px;}
.content #sub-menu {width:700px; height:30px; float:left; font-size:12px;}
.content #sub-menu li {float:left; margin-right:20px; position:relative; display:block; padding-top:10px; color:#666; text-decoration:underline;}
.content #ex-img {width:230px; float:left; margin-top:25px;}
.content #ex-txt {width:630px; float:left; margin-left:15px; margin-top:25px; font-size:12px; font-weight:normal; line-height:24px;}
.content #ex-txt span {font-size:14px;}
.content #staff {width:390px; float:left; margin-left:20px; font-size:12px; line-height:20px;}
.content #staff-img {width:85px; height:100px; float:left; margin:3px;}
.content #staff-txt {width:280px; height:100px; float:left; margin:3px; padding-top:20px;}
.content #staff-txt a {text-decoration:underline;}
.content #press {width:720px; float:left; margin-left:35px; margin-top:25px; padding-bottom:20px; font-size:12px; font-weight:normal; line-height:24px; border-bottom:1px solid #CCC;}
.content #press a {text-decoration:underline;}
.content #calendar {width:720px; float:left; margin-top:25px; padding-bottom:20px; font-size:12px; font-weight:normal; margin-bottom:20px;}

.content #exhibition {width:900px; border-bottom:1px solid #CCC; overflow:hidden; padding-bottom:20px;}

/* Slider */
.body #slider {margin-top:-5px;}

/* FBG */
.FBG_resize {background:url(images/footerBG.png); background-repeat:repeat-x; padding:0px; margin-top:25px; height:230px;}
.FBG { margin:0 auto; padding:10px 0; width:960px;}
.FBG h2 { font:bold 14px Arial, Helvetica, sans-serif; color:#f3f3ed; padding:15px 5px; margin:0;}
.FBG ul { list-style:none; margin:0; padding:0;}
.FBG li { padding:1px 0 1px 3px; margin:0;}
.FBG li a { font:normal 11px Arial, Helvetica, sans-serif; color:#fff; text-decoration:none; text-transform:none;}
.FBG li a:hover { text-decoration:none; color:#fff;}
.FBG p { font:normal 11px Arial, Helvetica, sans-serif; color:#fff; line-height:1.8em; padding:5px 5px; margin:0;}
.FBG img {
	margin:5px;
	padding:10;
	float:left;
}
.FBG .gem { width:250px; float:left; margin-top:-14px; padding:0px;}
.FBG .blog { width:250px; float:left; margin:10px 0 10px 15px; padding:5px; color:#CCC;}
.FBG .blog a {color:#CCC;}
.FBG .blog2 {
	width:100px;
	float:left;
	margin:5px 0 5px 10px;
	padding:1px;
}
.FBG .blog2 a:hover {color:#CCC;}
.FBG .blog4 {
	width:130px;
	float:left;
	margin:0px 0 0px 0px;
	padding:0px;
}

/* contactform*/
#contactform { margin:0; padding:5px 10px; }
#contactform * { color:#036; }
#contactform ol { margin:0; padding:0; list-style:none; }
#contactform li { margin:0; padding:0; background:none; border:none; display:block; clear:both; }
#contactform li.buttons { margin:5px 0 5px 0; clear:both; }
#contactform label { margin:0; width:100px; display:block; padding:10px 0; color:#036; font: normal 11px Arial, Helvetica, sans-serif; text-transform:capitalize; float:left; }
#contactform label span { color:##036; }
#contactform input.text { width:450px; border:1px solid #dfdfdf; margin:2px 0; padding:5px 2px; height:16px; background:#f8f8f8; float:left; }
#contactform textarea { width:450px; border:1px solid #dfdfdf; margin:2px 0; padding:2px; background:#f8f8f8; float:left; }
#contactform li.buttons input { padding:3px 0 3px 0; margin:10px 0 0 0; border:0; color:#FFF; float:left; }
#contact-info {width:200px; float:left; margin:60px 0px 10px 0px; padding:20px; font-size:14px; line-height:24px; color:#036;}

/*************footer**********/
.footer {padding:0;  margin-bottom:15px; margin-top:-10px;}
.footer_resize { width:940px; margin:0 auto; padding:6px 10px; border-top:1px solid #6a584e;}
.footer p { font:normal 11px  Arial, Helvetica, sans-serif; color:#ceb7ab;}
.footer a { font:bold 11px Arial, Helvetica, sans-serif; color:#ceb7ab; text-decoration:none; padding:5px; margin:0;}
.footer p.right { text-align:right; width:200px; margin:0; padding:15px 0 0 0; float:right;} 
.footer p.leftt { text-align:left; width:350px; margin:0; padding:15px 0 0 0; float:left;}
.footer #logos {width:300px; float:left; padding:0px 0 0 0;  margin:0;}

p.clr, .clr { clear:both; padding:0; margin:0; background:none;}
li.bg, .bg { float:right; clear:both; border-top:1px solid #e2e2e2; width:100%; padding:0; margin:5px 0; background:none; line-height:0;}


/*------------------------------------*\
	NAV
\*------------------------------------*/
#nav{
	float:left;
	width:100%;
	list-style:none;
	font-weight:bold;
	margin-top:2px;
}
#nav li{
	float:left;
	margin-right:10px;
	position:relative;
	display:block;
	
}
#nav li a{
	display:block;
	padding:5px;
	color:#fff;

	text-decoration:none;

	text-shadow:1px 1px 1px rgba(0,0,0,0.75); /* Text shadow to lift it a little */
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px;
}
#nav li a:hover{
	color:#fff;
	background:none;


}

/*--- DROPDOWN ---*/
#nav ul{
	list-style:none;
	position:absolute;
	left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
	opacity:0; /* Set initial state to transparent */
	-webkit-transition:0.25s linear opacity; /* Make the dropdown fade-in in Webkit */
	
	
}
#nav ul li{
	padding-top:1px; /* Introducing a padding between the li and the a give the illusion spaced items */
	margin-top:20px;
	margin-left:-10px;
	float:none;
}
#nav ul a{
	white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
	display:block;
}
#nav li:hover ul{ /* Display the dropdown on hover */
	left:0; /* Bring back on-screen when needed */
	opacity:1; /* Fade to opaque */
}
#nav li:hover a{ /* Set styles for top level when dropdown is hovered */

	background:#384054; /* Solid colour fall-back */
	background:rgba(56,64, 84,0.75); /* It'll look nice semi-transparent */
	
	
}
#nav li:hover ul a{ /* Override some top level styles when dropdown is hovered */
	text-decoration:none;
	-webkit-transition:-webkit-transform 0.075s linear;
	width:150px;
	text-align:left;
}
#nav li:hover ul li a:hover{ /* Set styles for dropdown when items are hovered */
	background:#a37979; /* Solid colour fall-back */

	background:rgba(163,121,121,0.75); /* It'll look nice semi-transparent */
	-moz-transform:scale(1.05);
	-webkit-transform:scale(1.05);
	width:150px;
	text-align:left;
}

#slider {  width:940px; padding:10px 0 20px 0; margin:0 auto;}
div#slideshow { float: left; width:940px; height: 420px; margin-left:20px; margin-top:-20px; margin-bottom:20px; }
.slider-item { width: 100% !important; height: 400px; }
.slider_content_inner img { border: none; }

#slider1 {
margin-top:18px;
padding:0;
}

.nivoZoomHover {background:url(images/zoom.png) no-repeat 50% 50%;}

	/* black version of the overlay. simply uses a different background image */
	div.apple_overlay.black {
		background-image:url(images/transparent.png);
		width:650px;
		height:485px;		
		color:#fff;
	}
	
	div.apple_overlay h2 {
		margin:0px 0 -9px 0;
		font-weight:bold;
		font-size:14px;
		
	}
	
	div.black h2 {
		color:#fff;
		
	}
	
	#triggers {
		margin-top:0px;
		text-align:center;
	}
	
	#triggers img {
		background-color:#fff;
		padding:2px;
		border:1px solid #ccc;
		margin:2px 5px;
		cursor:pointer;
		-moz-border-radius:4px;
		-webkit-border-radius:4px;
		
		
	}