/* Copyright (C) YOOtheme GmbH, YOOtheme Proprietary Use License (http://www.yootheme.com/license) */

/*
 * Widgetkit Slideshow: Cloud List Style
 */


.wk-slideshow-listcloud {
	padding: 2px;
	border: 1px solid #d2d2d4;
	border: 1px solid rgba(0,0,2,0.15);
	border-bottom-color: #a2a2a4;
	border-bottom-color: rgba(0,0,2,0.3);
	border-radius: 7px;
	background: #F7F7F9;
	box-shadow:
		inset 0 0 0 2px rgba(255,255,255,1.0),
		0 1px 0 rgba(0,0,2,0.05);
}

.wk-slideshow-listcloud > div { border: 0; }


/* Navigation
----------------------------------------------------------------------------------------------------*/

.wk-slideshow-listcloud .nav {
	position: absolute;
	top: 2px;
	bottom: 2px;
	width: 200px;
	border-top: 0;
	border-right: 1px solid #d2d2d4;
	border-radius: 7px 7px 0 0;
}

.wk-slideshow-listcloud .nav li {
	margin-right: -1px;
	padding: 1px 0;
	border-right: 1px solid #d2d2d4;
	border-bottom: 1px solid #d2d2d4;
	background: #e5e5e7 url(images/nav.png) 0 0 repeat-x;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
	color: #777779;
}

.wk-slideshow-listcloud .nav li:first-child {
	border-top-left-radius: 5px;
	box-shadow: none;
}

.wk-slideshow-listcloud .nav li:last-child { border-bottom-left-radius: 5px; }
.wk-slideshow-listcloud .nav li.active:last-child { border-bottom: 0; }

.wk-slideshow-listcloud .nav span {
	padding: 10px 15px 8px 15px;
	overflow: hidden;
}

.wk-slideshow-listcloud .nav li.active {
	border-top: 0;
	border-right: 0;
    border-bottom: 1px solid #d2d2d4;
	background: #f7f7f9;
	box-shadow:
		inset -3px 1px 2px #f7f7f9,
		inset 1px 1px 2px rgba(0,0,2,0.08);
	color: #444446;
}

.wk-slideshow-listcloud .nav li.active:first-child { box-shadow: none; }

.wk-slideshow-listcloud .nav span > img { margin-right: 5px; vertical-align: middle; }

/* Content
----------------------------------------------------------------------------------------------------*/

.wk-slideshow-listcloud .slides-container { margin-left: 200px; }

.wk-slideshow-listcloud .slides > li > article { padding: 20px; }


/* Navigation Width
----------------------------------------------------------------------------------------------------*/

.wk-slideshow-listcloud .nav-100 { width: 100px; }
.wk-slideshow-listcloud .nav-100 + .slides-container { margin-left: 100px; }

.wk-slideshow-listcloud .nav-150 { width: 150px; }
.wk-slideshow-listcloud .nav-150 + .slides-container { margin-left: 150px; }

.wk-slideshow-listcloud .nav-250 { width: 250px; }
.wk-slideshow-listcloud .nav-250 + .slides-container { margin-left: 250px; }