/* sidebar gallery styles */

#sb_gallery {
	/*
	-webkit-box-shadow: rgba(0,0,0,.2) 0px 2px 5px;
	-moz-box-shadow: rgba(0,0,0,.2) 0px 2px 5px;
	box-shadow: rgba(0,0,0,.2) 0px 2px 5px;
	
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	
	border:1px solid #ddd;
	*/
	
	/* The width of the gallery */
	/* background:url(../images/sidebar-gallery/panel.jpg) no-repeat top left #ffffff; */
	background-color: transparent;
	width:260px;
	overflow:hidden;
	position: relative;
}

#sb_slides{
	clear: both;
	position: relative;
	height:280px;
	/* jQuery changes the width later on to the sum of the widths of all the slides. */
	width:258px;
	overflow:hidden;
	
	}

.sb_slide {
	float:left;
	position: relative;
	width:260px;
	height:280px;
	}

.sb_body {
	width:260px;
	height:280px;
	/* top: 5px; */
	}

.sb_title {
	display: block;
	padding: 8px 0 8px 8px;
	font-family:Myriad Pro,Arial,Helvetica,sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: #363636;
	width: 250px;
	}

.sb_text {
	display: block;
	padding: 0 4px 8px 8px;
	font-size: 11px;
	font-weight: 100;
	line-height: 12px;
	color: #888888;
	width: 246px;
	}

.sb_proxy {
	display: block;
	padding:8px;
	font-size: 14px;
	font-weight: 100;
	text-align: center;
	width: 240px;
	}
	
#sb_stage {
	display: inline-block;
	position: relative;
	/* left: 10px; */
	}

#sb_nav {
	display: block;
	height:22px;
	margin:0px;
	padding: 0;
	text-align: center;
	}
	
	#sb_nav ul {
		border: none;
		}
	
	#sb_nav ul.sb_slides {
		display: inline-block;
		list-style-type:none;
		position: relative;
		margin: 0px;
		}
	
		#sb_nav li.sb_slide_item {
			float:left;
			display:inline-block;
			width:10px;
			height:15px;
			background:url(../images/sidebar-gallery/thumb_unselected.png) no-repeat 50% 55%;
			padding-right: 1px;
			padding-left: 1px;
			cursor:pointer;
			overflow:hidden;
			}
			
			#sb_nav li.sb_slide_item a{ 
				display: block;
				width:10px;
				height:15px;
				}

			#sb_nav li.sb_slide_item a img{ 
				border: none;
				/*	not so elegant hack.  to vertically align the thumbnails we need to position
					the top to 50% and then subtract 50% of the image height to make the thumbnails
					appear vertically aligned. Only works because we know the exact dimensions. SIMON
					*/ 
				position: relative;
				top: 50%;
				margin-top:-12px;
				}
						
		#sb_nav li.sb_act,
		#sb_nav li.sb_act a:hover {
			background:url(../images/sidebar-gallery/thumb_selected.png) no-repeat 50% 55%;
			}
			
		#sb_nav li.sb_inact a:hover {
			background:url(../images/sidebar-gallery/thumb_hover.png) no-repeat 50% 55%;
			}

		/*
		#sb_nav li.sb_first_divider {
			float:left;
			display:inline-block;
			width:2px;
			height:45px;
			}
			*/
			
			
.sidebarRect1 {								
	-webkit-box-shadow: rgba(0,0,0,.2) 0px 2px 5px;
	-moz-box-shadow: rgba(0,0,0,.2) 0px 2px 5px;
	box-shadow: rgba(0,0,0,.2) 0px 2px 5px;
	
	-webkit-border-bottom-right-radius: 8px;
	-webkit-border-bottom-left-radius: 8px;
	-moz-border-radius-bottomright: 8px;
	-moz-border-radius-bottomleft: 8px;
	border-bottom-right-radius: 8px;
	border-bottom-left-radius: 8px;
	
	padding-bottom: 6px;
	margin-bottom: 5px;
	overflow: hidden;
	}
	
/* --------- IE HACKS --------- */
.forceIEcenter {
	margin-left: auto;
	margin-right: auto;
	}