#x7form { width: 600px; }
.x7drafts { width:680px; }
.tooltip {
    display:none;
    background:transparent url("../images/black_arrow.png");
    font-size:12px;
    height:70px;
    width:160px;
    padding:25px;
    color:#fff;	
}

#vidlist { list-style-type: none; margin: 0px; padding: 0px; border: dashed; border-width: thin; }
#playlist { width: 153px; height: 110px; list-style-type: none; margin: 0px; padding: 0px; border: dashed; border-width: thin; }
#playlist li, #vidlist li { padding: 5px; font-size: 1.2em; width: 135px; height: 100px; border: dashed; border-width: thin; }
#vidlistdiv, #betweendiv, #playlistdiv { float: left; padding:15px; }
#betweendiv { padding-top: 120px; }
textarea#listname { width: 160px; height: 20px; border: 3px solid #cccccc; padding: 5px; font-family: Tahoma, sans-serif; }

#x7wrapdiv, #x7loading { display: none; }
			#sortable, #trash { list-style-type: none; margin: 0; padding: 0; width: 100px; }
			#sortable li, #trash li { margin: 0 5px 5px 5px; padding: 5px; width: 90px; height: 60px; }
			html>body #sortable li { height: 61px; line-height: 1.2em; }
			html>body #trash li { height: 91px; line-height: 1.2em; }
			.ui-state-highlight { height: 1.5em; line-height: 1.2em; }
			textarea#listname { width: 160px; height: 20px; border: 3px solid #cccccc; padding: 5px; font-family: Tahoma, sans-serif; }	    
/* root element for scrollable */
.vertical {  
	
	/* required settings */
	position:relative;
	overflow:hidden;	

	/* vertical scrollers have typically larger height than width */	
	height: 270px;	 
	width: 550px;
	border-top:1px solid #ddd;	
}

/* root element for scrollable items */
.items {	
	position:absolute;
	
	/* this time we have very large space for height */	
	height:20000em;	
	margin: 0px;
}

/* single scrollable item */
.item {
	border-bottom:1px solid #ddd;
	margin:10px 0;
	padding:15px;
	font-size:12px;
	height:100px;
}

/* elements inside single item */
.item img {
	float:left;
	margin-right:20px;
	height:90px;
	width:110px;
}

.item h3 {
	margin:0 0 5px 0;
	font-size:16px;
	color:#456;
	font-weight:normal;
}

/* the action buttons above the scrollable */
#actions {
	width:500px;
	margin:30px 0 10px 0;	
}

#actions a {
	font-size:11px;		
	cursor:pointer;
	color:#666;
}

#actions a:hover {
	text-decoration:underline;
	color:#000;
}

.disabled {
	visibility:hidden;		
}

.next {
	float:right;
}

/*
	root element for the scrollable horizontal
	when scrolling occurs this element stays still.
*/
.scrollableh {

	/* required settings */
	position:relative;
	overflow:hidden;
	width: 680px;
	height:120px;

	/* custom decorations */
	border:1px solid #ccc;
	background:url(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.
*/
.scrollableh .items {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
	clear:both;
}

.itemsh div {
	float:left;
	width:680px;
}

/* single scrollable item */
.scrollableh img {
	float:left;
	margin:20px 5px 20px 21px;
	background-color:#fff;
	padding:2px;
	border:1px solid #ccc;
	width:100px;
	height:75px;
	
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
}

/* active item */
.scrollableh .active {
	border:2px solid #000;
	position:relative;
	cursor:default;
}

/* this makes it possible to add next button beside scrollable */
.scrollableh {
	float:left;	
}

/* prev, next, prevPage and nextPage buttons */
a.browseh {
	background:url(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(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;		
}