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

	/* required settings */
	position:relative;
	overflow:hidden;
	/*width: 90%;*/
	height:300px;

	/* custom decorations */
	/*border:1px solid #ccc;
				background:url(/img/global/gradient/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;
}


.scrollable div {
	float: left;
}


/* 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;
}
*/


/* position and dimensions of the navigator */
.navi {
	/*margin-left:328px;*/
	margin: auto;
	width:42px;
	height:20px;
}


/* items inside navigator */
.navi a {
	width:8px;
	height:8px;
	float:left;
	margin:3px;
	background:url(/images/navigator.png) 0 0 no-repeat;
	display:block;
	font-size:1px;
}

/* mouseover state */
.navi a:hover {
	background-position:0 -8px;      
}

/* active state (current page state) */
.navi a.active {
	background-position:0 -16px;     
}




/* 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;
	margin:80px 20px;
	cursor:pointer;
	font-size:1px;
}

/* right */
a.right 				{ background-position: 0 -30px; clear:right; margin-right: 0px;	float:right;}
a.right:hover 		{ background-position:-30px -30px; }
a.right:active 	{ background-position:-60px -30px; } 


/* left */
a.left				{ margin-left: 0px; float:left;} 
a.left:hover  		{ background-position:-30px 0; }
a.left:active  	{ background-position:-60px 0; }


/* disabled navigational button */
a.disabled {
	visibility:hidden !important;		
} 	











/* main vertical scroll */
#main {
	position:relative;
	overflow:hidden;
	height: 450px;
}
 
/* root element for pages */
#pages {
	position:absolute;
	height:20000em;
}
 
/* single page */
.page {
	padding:10px;
	height: 450px;
	/*background:#222 url(http://static.flowplayer.org/img/global/gradient/h600.png) 0 0 repeat-x;*/
	background:#555;
	/*width:520px;*/
	width: 750px;
}
 
/* root element for horizontal scrollables */
.scrollable2 {
	position:relative;
	overflow:hidden;
	/*width: 510px;*/
	width: 740;
	height: 450px;
}
 
/* root element for scrollable items */
.scrollable2 .items2 {
	width:20000em;
	position:absolute;
	clear:both;
}
 
/* single scrollable item */
.item2 {
	float:left;
	cursor:pointer;
	/*width:500px;*/
	width: 730px;
	height:450px;
	padding:10px;
}
 
/* main navigator */
#main_navi {
	float:left;
	padding:0px !important;
	margin:0px !important;
}
 
#main_navi li {
	background-color:#333;
	border-top:1px solid #666;
	clear:both;
	color:#FFFFFF;
	font-size:12px;
	height:75px;
	list-style-type:none;
	padding:10px;
	width:190px;
	cursor:pointer;
}
 
#main_navi li:hover {
	background-color:#444;
}
 
#main_navi li.active {
	background-color:#555;
}
 
#main_navi img {
	float:left;
	margin-right:10px;
}
 
#main_navi strong {
	display:block;
}
 
#main div.navi2 {
	margin-left:250px;
	cursor:pointer;
}


/* position and dimensions of the navigator */
.navi2 {
	margin-left:328px;

	width:42px;
	height:20px;
}


/* items inside navigator */
.navi2 a {
	width:8px;
	height:8px;
	float:left;
	margin:3px;
	background:url(/images/navigator.png) 0 0 no-repeat;
	display:block;
	font-size:1px;
}

/* mouseover state */
.navi2 a:hover {
	background-position:0 -8px;      
}

/* active state (current page state) */
.navi2 a.active {
	background-position:0 -16px;     
}








/* TABS */

/* navigation */
#nav {
	/*background:#ddd url(http://static.flowplayer.org/img/global/gradient/h300_reverse.png);*/
	/*border-bottom:1px solid #CCCCCC;*/
	height:70px;	
	/*width:745px;*/
/*	border: 1px solid #333;*/
}
 
#nav ul {	
	/*width:600px;*/
	/*margin:0 auto;	*/
}
 
#nav li {	
	/*border-right:1px solid #ddd;*/
	float:left;
	/*padding-left:1px;*/
	/*width:175px;*/
	list-style-type:none;
	text-align:center;

}
 
#nav a {
	color:#333333;
	display:block;
	/*padding:17px;*/
	position:relative;
	word-spacing:-2px;
	font-size:11px;		
	height:70px;
	text-decoration:none;
	border: 1px solid #dcdcdc;

}	
 
#nav a:hover {
/*	background: #999;*/
	border: 1px solid #ccc;

}

#nav a.current {
	/*background:url(http://static.flowplayer.org/tools/img/tabs/down_large.jpg);*/	
/*	background: #666;*/
	border: 3px solid #666;
}
 
#nav img {
	background-color:#fff;
/*	border:1px solid #ccc;
	margin:3px 0 5px 27px;
	padding:4px;		
*/	display:block;
}
 
#nav strong {
	display:block;		
	font-size:13px;
}
 
/* panes */
#panes {
/*	background:#fff url(http://static.flowplayer.org/img/global/gradient/h300_reverse.png) repeat scroll 0 0;
	border-color:#ccc;
	border-style:solid;
	border-width:1px 1px 0;
	width:743px;	*/
	height:1600px;
/*	margin-bottom:-20px;
	padding-bottom:20px;
*/	
	/* must be relative so the individual panes can be absolutely positioned */
	position:relative;
}
 
/* crossfading effect needs absolute positioning from the elements */
#panes .holder {
	display:none;		
	position:absolute;
/*	top:20px;
	left:20px;
*/	font-size:14px;
	color:#444;	
	/*width:650px; */
	/*border: 1px solid #333;*/

}


 
.overlay {
	display:none;
	width:500px;
	padding:20px;
	background-color:#ddd;
}






/* HEADINGS */

h1.product-title {
	font-size: 18px;
}

h3.header {
	padding: 20px 0px 20px 0px;
}

h3.header strong {
	font-weight: normal;
	text-transform: uppercase;
}

p.product-title {
	text-align: left;
	color: #4ca1a3;
	font-size: 12px;
}

p.product-price {
	text-align: left;
	color: #535352;
	font-size: 10px;
}



.scroll-product-image {
	height: 177px;
	width: 130px;
}

.bordered {
	border: 1px solid #ccc;
	margin: 20px 0px 20px 0px;
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px;
}


img.vertical {
	width: 110px;
}





/* tooltip */
#formats a:hover {
	color: #4ca1a3;
}


/* tooltip styling */
.tooltip2 {
	display:none;
	background:url(/images/white_big.png);
	height:141px;
	padding:20px 30px 30px 30px;
	width:310px;
	font-size:11px;
	color:#fff;
}

/* a .label element inside tooltip */
.tooltip2 .label {
	color:yellow;
	width:35px;
}

.tooltip2 a {
	color:#ad4;
	font-size:11px;
	font-weight:bold;
}







/* Actionable Buttons */

.actionable, .actionable:visited {
	background: #222 url(/images/alert-overlay.png) repeat-x; 
	display: inline-block; 
	padding: 5px 10px 6px; 
	color: #fff; 
	text-decoration: none;
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	border-bottom: 1px solid rgba(0,0,0,0.25);
	position: relative;
	cursor: pointer;
}

.actionable:hover							{ background-color: #111; color: #fff; }
.actionable:active							{ top: 1px; }
.small.actionable, .small.actionable:visited 			{ font-size: 11px; padding: ; }
.actionable, .actionable:visited,
.medium.actionable, .medium.actionable:visited 		{ font-size: 13px; font-weight: bold; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); }
.large.actionable, .large.actionable:visited 			{ font-size: 16px; padding: 12px 18px 13px; }

.green.actionable, .green.actionable:visited		{ background-color: #aab023; }
.green.actionable:hover						{ background-color: #6b741d; }

.white.actionable, .white.actionable:visited		{ background-color: #fff; color: #aab023; text-shadow: 0 0px 0px rgba(0,0,0,0);}
.white.actionable:hover						{ background-color: #aab023; color: #fff; }

.white2.actionable, .white2.actionable:visited		{ background-color: #fff; color: #63cae1; text-shadow: 0 0px 0px rgba(0,0,0,0);}
.white2.actionable:hover						{ background-color: #63cae1; color: #fff; }

.blue.actionable, .blue.actionable:visited		{ background-color: #63cae1; }
.blue.actionable:hover							{ background-color: #4997ca; }
.red.actionable, .red.actionable:visited			{ background-color: #e33100; }
.red.actionable:hover							{ background-color: #872300; }
.magenta.actionable, .magenta.actionable:visited		{ background-color: #a9014b; }
.magenta.actionable:hover							{ background-color: #630030; }
.orange.actionable, .orange.actionable:visited		{ background-color: #ff5c00; }
.orange.actionable:hover							{ background-color: #d45500; }
.yellow.actionable, .yellow.actionable:visited		{ background-color: #ffb515; }
.yellow.actionable:hover							{ background-color: #fc9200; }

input.actionable, button.actionable {
	border: 0px;
}




/*Quotes */
/*
 |	Setting the width for the blockquotes is required
 |	to accurately adjust it's contianer
*/

blockquote {
	font-family: Georgia, Times, serif;
	margin: 0 auto;
	}
	




	/* Selectmenu
	----------------------------------*/
	.ui-selectmenu { display: block; position:relative; height:2em; text-decoration: none; overflow:hidden;}
	.ui-selectmenu-icon { position:absolute; right:6px; margin-top:-8px; top: 50%; }
	.ui-selectmenu-menu { padding:0; margin:0; list-style:none; position:absolute; top: 0; visibility: hidden; overflow: auto; }
	.ui-selectmenu-open { visibility: visible; }
	.ui-selectmenu-menu-popup { margin-top: -1px; }
	.ui-selectmenu-menu-dropdown { }
	.ui-selectmenu-menu li { padding:0; margin:0; display: block; border-top: 1px dotted transparent; border-bottom: 1px dotted transparent; border-right-width: 0 !important; border-left-width: 0 !important; font-weight: normal !important; }
	.ui-selectmenu-menu li a,.ui-selectmenu-status {line-height: 1.4em; display:block; padding:.3em 1em; outline:none; text-decoration:none; }
	.ui-selectmenu-menu li.ui-selectmenu-hasIcon a,
	.ui-selectmenu-hasIcon .ui-selectmenu-status { padding-left: 20px; position: relative; margin-left: 5px; }
	.ui-selectmenu-menu li .ui-icon, .ui-selectmenu-status .ui-icon { position: absolute; top: 1em; margin-top: -8px; left: 0; }
	.ui-selectmenu-status { line-height: 1.4em; }
	.ui-selectmenu-open li.ui-selectmenu-item-focus a {  }
	.ui-selectmenu-open li.ui-selectmenu-item-selected { }
	.ui-selectmenu-menu li span,.ui-selectmenu-status span { display:block; margin-bottom: .2em; }
	.ui-selectmenu-menu li .ui-selectmenu-item-header { font-weight: bold; }
	.ui-selectmenu-menu li .ui-selectmenu-item-content {  }
	.ui-selectmenu-menu li .ui-selectmenu-item-footer { opacity: .8; }
	/*for optgroups*/
	.ui-selectmenu-menu .ui-selectmenu-group { font-size: 1em; }
	.ui-selectmenu-menu .ui-selectmenu-group .ui-selectmenu-group-label { line-height: 1.4em; display:block; padding:.6em .5em 0; font-weight: bold; }
	.ui-selectmenu-menu .ui-selectmenu-group ul { margin: 0; padding: 0; }