/* About URI slider styles */
#principal_members_wrapper .stripViewer .panelContainer .panel ul {
text-align: left;
margin: 0 15px 0 30px;
}

#principal_members_wrapper .slider-wrap { /* This div isn't entirely necessary but good for getting the side arrows vertically centered */
display:block !important;
margin: 0;
position:relative;
width:200px;
}

/* These 2 lines specify style applied while slider is loading */
#principal_members_wrapper .csw {width: 170px; height: 125px; background: #E1DDD2; overflow: hidden;}
#principal_members_wrapper .csw .loading {margin: 20px 0 20px 0; text-align: center}

#principal_members_wrapper .stripViewer { /* This is the viewing window */
display:block !important;
position: relative;
overflow: hidden; 
margin: 0 auto;
width: 300px; /* Also specified in  .stripViewer .panelContainer .panel  below */
clear: both;
top: 0;
height:210px;
}

#principal_members_wrapper .stripViewer .panelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS  */
position: relative;
left: 0; 
top: -0;
width: 100%;
list-style-type: none;
/* -moz-user-select: none; // This breaks CSS validation but stops accidental (and intentional - beware) panel highlighting in Firefox. Some people might find this useful, crazy fools. */
}

#principal_members_wrapper .stripViewer .panelContainer .panel { /* Each panel is arranged end-to-end */
float:left;
position: relative;
width: 170px;
margin: 0;
display:block; /* Also specified in  .stripViewer  above */
margin:0;
padding:0;
height:210px;
}

#principal_members_wrapper .stripViewer .panelContainer .panel .wrapper { /* Wrapper to give some padding in the panels, without messing with existing panel width */
display:block; 
}

#principal_members_wrapper .stripViewer .panelContainer .panel .wrapper img{ /* Wrapper to give some padding in the panels, without messing with existing panel width */
float:left; 
margin:0;
border:0;
}


#principal_members_wrapper .stripViewer .panelContainer .panel .wrapper h4{ /* Wrapper to give some padding in the panels, without messing with existing panel width */
font-size:1em;
font-weight:bold;
margin:10px 0 0 0;
color:#377a9e;
}

#principal_members_wrapper .stripViewer .panelContainer .panel .wrapper h3 a{ /* Wrapper to give some padding in the panels, without messing with existing panel width */
font-weight:bold;
margin:10px 0 0 0;
color:#377a9e;
font-size:18px;
}

#principal_members_wrapper .stripViewer .panelContainer .panel .wrapper p{ /* Wrapper to give some padding in the panels, without messing with existing panel width */
font-size:.85em; 
}

#principal_members_wrapper .stripNav { /* This is the div to hold your nav (the UL generated at run time) */
margin: auto;
display:none;
}

#principal_members_wrapper .stripNav ul { /* The auto-generated set of links */
list-style: none;
}

#principal_members_wrapper .stripNav ul li {
float: left;
margin-right: 5px; /* If you change this, be sure to adjust the initial value of navWidth in coda-slider.1.1.1.js */
}

#principal_members_wrapper .stripNav li a:hover {
background: #333;
}

#principal_members_wrapper .stripNav li a.current {
background: #000;
}

#principal_members_wrapper .stripNavL, .stripNavR { /* The left and right arrows */

}
#principal_members_wrapper .stripNavL a, .stripNavR a {
display: block;
height: 30px;
width: 30px;
text-indent: -9999em;
z-index:1001;
}

#principal_members_wrapper .stripNavL {
left: 30px;
}

#principal_members_wrapper .stripNavR {
right: 0;
}

#principal_members_wrapper .stripNavL {
background: url("/images/arrows/red_circle_white_arrow_left.gif") no-repeat center;
}

#principal_members_wrapper .stripNavR {
background: url("/images/arrows/red_circle_white_arrow_right.gif") no-repeat center;
}