/*
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}
*/
h1{
	font-size:2em;
	font-weight:normal;
	margin:.8em 0;
}
h2{
	font-size:1.4em;
	font-weight:normal;
	margin:.8em 0;
}
div.scrollable { 
    /* required settings */ 
    position:relative; 
    overflow:hidden; 
    height:160px; 
} 
/* 
    root element for scrollable items. Must be absolutely positioned 
    and it should have a super large width to accomodate scrollable items. 
    it's enough that you set width and height for the root element and 
    not for this element. 
*/ 
div.scrollable div.items { 
    /* this cannot be too large */ 
    width:20000em; 
    position:absolute; 
    height:200px;
} 
/* single scrollable item */
div.scrollable div.items img, #pic_holder img{
	cursor:pointer;
	float:left;
	/* custom decoration */
	padding:4px;
	margin:2px;
	border:1px solid #ccc;
	-moz-border-radius: 7px 7px 7px 7px; 
	opacity:.8;
}
#pic_holder{
	min-height:300px;
	width:700px;
	margin-left: -10px;
}
#pic_holder img{
	opacity:1;
}
#pic_holder div.loading{
	text-align:center;
	width:100%;
}
#pic_holder div.loading img{
 	border-width:0;
	float:none;
}
/* active item */
div.scrollable div.items img.active, #pic_holder img.active{
	border:1px solid #FF6600;		
	background-color:#EDEDED;
	opacity:1;
}
/* this makes it possible to add next button beside scrollable */
div.scrollable {
	float:left;	
}
/* prev, next, prevPage and nextPage buttons */
#prev, #next, a.prevPage, a.nextPage {
	display:block;
	width:18px;
	height:18px;
	background:url(../images/left.png) no-repeat;
	float:left;
	margin:34px 10px;
	cursor:pointer;
	font-size:1px;
}
#prev{
	margin-left:20px;
}
#next{
	margin-left:0px;
}
/* mouseover state */
#prev:hover, #next:hover, a.prevPage:hover, a.nextPage:hover {
	background-position:0px -18px;		
}
/* disabled navigational button */
a.disabled {
	visibility:hidden !important;		
}
/* next button uses another background image */
#next, a.nextPage {
	background-image:url(../images/right.png);
	clear:right;	
}
/*********** navigator ***********/
/* position and dimensions of the navigator */
#navi {
	height:20px;
	text-align:center;
}
/* items inside navigator */
#navi a {
	background:url(../images/navigator.png) 0 0 no-repeat;
	display:block;
	float:left;
	font-size:1px;
	height:8px;
	margin:3px;
	width:8px;
}
/* mouseover state */
#navi a:hover {
	background-position:0 -8px;      
}
/* active state (current page state) */
#navi a.active {
	background-position:0 -16px;     
} 	
#a_title{
	font: 40px Trebuchet, Trebuchet MS, Verdana, sans-serif;
	text-align:center;
	font-style:italic;
	color:#486583;
}