#overlay .close

{ 

  background-image:url(../images/close.png); 

  position:absolute; 

  right:-15px; 

  top:-15px; 

  cursor:pointer; 

  height:35px; 

  width:35px; 

}



#overlay2 .close

{ 

  background-image:url(../images/close.png); 

  position:absolute; 

  right:-15px; 

  top:-15px; 

  cursor:pointer; 

  height:35px; 

  width:35px; 

}



#tosoverlay .close

{ 

  background-image:url(../images/close.png); 

  position:absolute; 

  right:20px; 

  top:5px; 

  cursor:pointer; 

  height:35px; 

  width:35px; 

}



#contactoverlay .close

{ 

  background-image:url(../images/close.png); 

  position:absolute; 

  right:-15px; 

  top:-15px; 

  cursor:pointer; 

  height:35px; 

  width:35px; 

}



#overlay {

	background-image:url(../images/white.png);

	height:450px;

  z-index: 1000;

}



#overlay2 {

	background-image:url(../images/white.png);

	height:600px;

  z-index: 1000;

}



#tosoverlay {

	background-image:url(../images/white.png);
	height:375px;
  width:500px;
  margin-left: 50px;
  margin-top: 30px;
  z-index: 1000;  
  overflow-x: hidden;
  overflow-y: auto;

}



#contactoverlay {

	background-image:url(../images/white.png);

	height:850px;

  z-index: 1000;

}



div.wrap {

	height:200px;

  width: 400px;

  padding:50px 50px;

}



div.wrap2 {

	height:300px;

  width: 800px;

  padding:50px 50px;

}



div.toswrap {

	height:200px;

  width: 400px;
}



div.contactwrap {

	height:200px;

  width: 400px;

  padding:50px 50px;

}



img {

  border:0;

}



/*

	root element for the scrollable.

	when scrolling occurs this element stays still.

*/

.scrollable {



	/* required settings */

	position:relative;

	overflow:hidden;

	width: 680px;

	height:120px;



	/* custom decorations */

	border:1px solid #ccc;

	background:url(../images/h300.png) repeat-x;

}



/*

	root element for scrollable items. Must be absolutely positioned

	and it should have a extremely large width to accomodate scrollable items.

	it's enough that you set the width and height for the root element and

	not for this element.

*/

.scrollable .items {

	/* this cannot be too large */

	width:20000em;

	position:absolute;

	clear:both;

}



/* single scrollable item */

.scrollable img {

	float:left;

	margin:20px 5px 20px 21px;

	background-color:#fff;

	padding:2px;

	border:1px solid #ccc;

	cursor:pointer;

	width:100px;

	height:75px;

	

	-moz-border-radius:4px;

	-webkit-border-radius:4px;

}



/* active item */

.scrollable .active {

	border:2px solid #000;

	z-index:9999;

	position:relative;

}



/* this makes it possible to add next button beside scrollable */

.scrollable {

	float:left;	

}



/* prev, next, prevPage and nextPage buttons */

a.browse {

	background:url(../images/hori_large.png) no-repeat;

	display:block;

	width:30px;

	height:30px;

	float:left;

	margin:40px 10px;

	cursor:pointer;

	font-size:1px;

}



/* right */

a.right 				{ background-position: 0 -30px; clear:right; margin-right: 0px;}

a.right:hover 		{ background-position:-30px -30px; }

a.right:active 	{ background-position:-60px -30px; } 





/* left */

a.left				{ margin-left: 0px; } 

a.left:hover  		{ background-position:-30px 0; }

a.left:active  	{ background-position:-60px 0; }



/* up and down */

a.up, a.down		{ 

	background:url(../images/vert_large.png) no-repeat; 

	float: none;

	margin: 10px 50px;

}



/* up */

a.up:hover  		{ background-position:-30px 0; }

a.up:active  		{ background-position:-60px 0; }



/* down */

a.down 				{ background-position: 0 -30px; }

a.down:hover  		{ background-position:-30px -30px; }

a.down:active  	{ background-position:-60px -30px; } 





/* disabled navigational button */

a.disabled {

	visibility:hidden !important;		

} 	



/* root element for tabs  */

ul.css-tabs {  

	margin:0 !important; 

	padding:0;

	height:30px;

	border-bottom:1px solid #666;	 	

}



/* single tab */

ul.css-tabs li {  

	float:left;	 

	padding:0; 

	margin:0;  

	list-style-type:none;	

}



/* link inside the tab. uses a background image */

ul.css-tabs a { 

	float:left;

	font-size:13px;

	display:block;

	padding:5px 30px;	

	text-decoration:none;

	border:1px solid #666;	

	border-bottom:0px;

	height:18px;

	background-color:#efefef;

	color:#777;

	margin-right:2px;

	-moz-border-radius-topleft: 4px;

	-moz-border-radius-topright:4px;

	position:relative;

	top:1px;	

}



ul.css-tabs a:hover {

	background-color:#F7F7F7;

	color:#333;

}

	

/* selected tab */

ul.css-tabs a.current {

	background-color:#ddd;

	border-bottom:2px solid #ddd;	

	color:#000;	

	cursor:default;

}



	

div.css-panes div { 

     display:none; /* hides tabs */ 

} 

div.css-panes div div{ 

     display:block /* shows child divs */ 

} 



#demotip { 

    display:none; 

    background:transparent url(../images/black_arrow.png); 

    font-size:12px; 

    height:70px; 

    width:160px; 

    padding:25px; 

    color:#fff;

    z-index:1000;

}



#controlpaneltip { 

    display:none; 

    background:transparent url(../images/black_arrow.png); 

    font-size:12px; 

    height:70px; 

    width:160px; 

    padding:25px; 

    color:#fff;

    z-index:1000;

}



/* styling of the container. */ 

a.myPlayer {

	display:block;

	width: 640px;

	height:368px;

	text-align:center;

	margin:0 15px 15px 0;

	float:none;

	border:1px solid #999;

} 

 

/* play button */ 

a.myPlayer img { 

    margin-top:70px; 

    border:0px; 

} 

 

/* when container is hovered we alter the border color */ 

a.myPlayer:hover { 

    border:1px solid #000;