@charset "utf-8";
/* CSS Document */
#load {
   width: 650px;
   height: 375px;
   z-index: 100;
   background: url(/assets/img/loading.gif) no-repeat center center;

}
.loadpos {
	margin-top: 100px;
}
/** 
 * While we're having the loading class set.
 * Removig it, will remove the loading message
 */
.loading {
  background: url(/assets/img/loading.gif) no-repeat center center;
  z-index: 100;
     width: 650px;
  height: 375px;
}
#progressbar{
  background: url(/assets/img/loading.gif) no-repeat center center;
     width: 650px;
  height: 375px;
}
#vimage {
z-index: 100;
}
/**
 * This <div> element is wrapped by jCarousel around the list
 * and has the classname "jcarousel-container".
 */
.jcarousel-container {
    position: relative;
}

.jcarousel-clip {
    z-index: 2;
    padding: 0;
    margin: 0;
    overflow: hidden;
    position: relative;
}

.jcarousel-list {
    z-index: 1;
    overflow: hidden;
    position: relative;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
}

.jcarousel-list li,
.jcarousel-item {
    float: left;
    list-style: none;
    /* We set the width/height explicitly. No width/height causes infinite loops. */
    width: 35px;
    height: 35px;
       margin: 0;
    padding: 0;
}

/**
 * The buttons are added dynamically by jCarousel before
 * the <ul> list (inside the <div> described above) and
 * have the classnames "jcarousel-next" and "jcarousel-prev".
 */
.jcarousel-next {
    z-index: 3;
    display: none;
				float: left;
				width: 35px;
                margin-left: 5px;
}

.jcarousel-prev {
    z-index: 3;
    display: none;
				float: left;
				width: 35px;
                margin-right: 5px;
}

.osthumbslider {
   height: 35px;
   width: 710px;
   clear: both;
   display: block;
   margin: 0 auto;
   margin-top: 5px;
   text-align: center;
   border: 1px solid #CCCCCC;

}
.thumbslider {
   height: 35px;
   width: 635px;
   clear: both;
   display: block;
   margin: 0 auto;
   padding-top: 5px;
   padding-left: 10px;
   text-align: center;
   background: #023260;
   padding-bottom: 5px;

}
.slideit ul li img {
	margin-right: 2px;
	margin-left: 2px;
	border: 1px solid #CCCCCC;
   	width: 35px;
    height: 35px;
}
.slideit ul li img:hover {
	border: 1px solid #FF0000;
}
.slideit {
	float: left;
   text-align: center;
    margin: 0 auto;
	width: 720px;
     height: 42px;
     margin-left: 5px;
     margin-right: 5px;
}
.next{
	z-index: 30;
	position: relative;
	float: left;
	width: 35px;
	height: 35px;
    /*margin-left: -10px;*/
	background-image: url(/assets/img/next.png);
	background-repeat: no-repeat;
    
}
 .prev {
	z-index: 30;
	position: relative;
	float: left;
	width: 35px;
	height: 35px;
   /* margin-right: -10px;*/
	background-image: url(/assets/img/prev.png);
	background-repeat: no-repeat;
    margin-left: 10px;
}
.next span{
	display: none;
}
.prev span{
	display: none;
}
.next:hover{
	background-image: url(/assets/img/next_over.png);
	background-repeat: no-repeat;
}

.prev:hover{
	background-image: url(/assets/img/prev_over.png);
	background-repeat: no-repeat;
}
#pichere {
	width: 650px;
	height: 375px;
	border: 1px solid #CCCCCC;
}
/* photos page */
ul#gallery {
   list-style: none;
   padding: 0;
   clear: both;
   width: 635px;
   height: 35px;
   text-align: center;
   margin: 0 auto;
   background: #023260;
	}
ul#gallery li {
   margin: 0;
   padding: 0;
   display:inline;
   list-style: none;
  /* border: 1px solid #FF0000;*/
   	width: 35px;
    height: 35px;
    float: left;
}
ul#gallery li img:hover { border: 1px solid #0f1b21; }
ul#gallery li img:active { border: 1px solid white; }

div.caption {
	color: #FFFFFF;
	font-size: 0.8em;
	text-transform: uppercase;
	padding-top: 10px;
	padding-left: 15px;
	padding-right: 15px;
	display: block;
	position: absolute;
	width: 770px;
	height: 60px;
	margin-top: -62px;
	margin-left: 0px;
	z-index: 10;
	background: url(/assets/img/transblack.png) repeat;
	}
#main_image {
   height: 375px;
   width: 650px;
   display: block;
   clear: both;
   /*background: url(/assets/img/loading.gif) no-repeat center center;*/
	margin: 0 auto;
   text-align: center;
   overflow: hidden;
   /*    border: 1px solid #999999;
  border-bottom: 1px solid #999999; */
	}
    #main_image img{
   /* border: 1px solid #999999; */
    }
.previewcontainer {
   background: #FFFFFF;
   width: 660px;
   padding: 5px;
   margin-left: 20px;
}