/* CSS for Hierarchyslider */


/** Basic Body */

* { margin: 0; padding: 0; }
		
body{
	font-family: Verdana, Arial;
	background-color: black;
	width: 286px;			/* width of whole frame: use this width to specify width of iframe in presentation */
	height: 390px;			/* height of whole frame: use this width to specify width of iframe in presentation */
	border: 2px solid white;	/* border-on is helpful to check the size of presentation box - play with width and border */

}

img{

	height: 360px;			/* Define standard height of all panel pictures */
	width: 280px;			/* Define standard width of all panel pictures */
	border: 0px;
}


/** CSS Horizontal View Select Menu */


.viewtabs{
	width: 100%;
	overflow: hidden;
	border-bottom: 1px solid white; /* bottom horizontal line that runs beneath tabs */
}

.viewtabs ul{
	margin: 0;
	padding: 0;
	padding-left: 0px; 		/* offset of tabs relative to browser left edge */
	font: bold 11px Verdana;
	list-style-type: none;
}

.viewtabs li{
	display: inline;
	margin: 0;
}

.viewtabs li a{
	float: left;
	display: block;
	text-decoration: none;
	text-align: center;
	line-height: 12px;
	padding: 7px 8px; 		/* padding inside each tab */
	border-left: 1px solid black; 	/* left divider between tabs */
	border-right: 1px solid black; 	/* right divider between tabs */
	color: white;
	background-color: #686868; 	/* Background of tabs (default state)*/
	width: 28.5px;			/* Parametrize width of each panel according to # panels */
	height: 10px;			/* Parametrize height of each panel according to # panels */
}

.viewtabs li a:hover {
	background-color:  black;	/* Background of tabs for hover state */
}

.viewtabs .selected {			/* Current chosen tab decoration */
	background-color: #39c; 	/* Background of tabs (default state)*/
}