/*
 * FUNCTIONALITY
 */

.boutique{ margin:0; padding:0; position:relative; z-index:1 }
.boutique-frame{ margin:0; padding:0; list-style:none; position:absolute; z-index:1; display:none; border-width:0 }
.boutique-frame-image{ border:0; vertical-align:bottom }
.boutique-frame-title{ cursor:default }
.boutique-frame-text{ display:block; position:absolute; left:0; right:0; bottom:0; text-align:left; cursor:default; margin:0 }
/*.boutique-frame-text{ display:block;  left:0; right:0; bottom:0; text-align:left; cursor:default; margin:0 }*/
.boutique-frame-link, .boutique-frame-link:hover{ display:block; cursor:default; text-decoration:none; outline:none }
.boutique-frame-image, .boutique-frame, .boutique-frame-link{ -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -o-user-select:none; user-select:none; -webkit-user-drag:none; -moz-user-drag:none; user-drag:none }
.boutique.rtl .boutique-frame-title, .boutique.rtl .boutique-frame-text{ text-align:right }

/*
 * THEMING
 * Edit this section to style the frames, text, alignments etc.
 * If the id of your Boutique instance is different, do a find/replace on #boutique.
 * To overwrite these for a second instance on the same page, copy and prepend the classes with the #id of the other instance, like so: #boutique2 .boutique-frame{}
 */

#boutique,
.boutique{
	display: none; /* Start invisible until the plugin is loaded */
	margin: 0 auto;
}

/* The frames */
.boutique-frame{
	background: #cdd0d7 url(../images/loading.gif) center no-repeat; /* Color of the frame behind and around the image */
	border: 1px solid; /* Outer border around frame */
	border-color: #fcfcfc #ddd #ddd #fcfcfc;
}

/* Headers of all frames */
.boutique-frame-title{
	margin: 0;
	line-height: 1.3;
	font-family: sans-serif;
	font-weight: normal;
	color: #222;
}

/* Text area of all frames */
/* Note that this is the complete text layer, including the title header inside */
.boutique-frame-text{
	font-family: Verdana, sans-serif;
	line-height: 1.2;
	color: #444;
	background: #fcfcfc;
	margin: 0;
	padding: 10px 15px 14px;
	top: 0px;
	text-align:center;
}


/* The most frontal item (frame 3) */
.boutique .front .boutique-frame-image{
	margin: 6px; /* Determines the gap between image and frame border */
}
.boutique .front .boutique-frame-title{
	font-size: 28px; /* Front frame title header */
}
.boutique .front .boutique-frame-text{
	font-size: 18px; /* Front frame description text */
}

/* The further back items (frame 2 and 4) */
.boutique .behind .boutique-frame-image{ /* Determines the gap between image and frame border */
	margin: 3px;
}
.boutique .behind .boutique-frame-title{ /* Behind frame title headers */
	font-size: 16px;
}
.boutique .behind .boutique-frame-text{ /* Behind frame description text */
	font-size: 9px;
}

/* The furthest back items (frame 1 and 5) */
.boutique .back .boutique-frame-image{ /* Determines the gap between image and frame border */
	margin: 1px;
}
.boutique .back .boutique-frame-title{ /* Back frames title headers */
	font-size: 10px;
}
.boutique .back .boutique-frame-text{ /* Back frame description text */
	font-size: 9px;
}




/* specific css */

/* The frames */
body #example3 li{
	background: #ccc url(../images/loading.gif) center no-repeat;
	border:1px solid #fff;
}

/* Headers of all frames */
#example3 h6{
	margin: 0 0 6px;
	font-family: 'Segoe UI',Arial,Verdana,sans-serif;
	line-height: 100%;
	font-weight: normal;
	color: #fff;
	text-align:center;
}

/* Description text of all frames */
#example3 span{
	font-family: 'Segoe UI',Arial,Verdana,sans-serif;
	padding: 5px 14px 12px;
	color: #fff;
	background: none;
}

/* The most frontal item */
#example3 .front{
	margin-top: 0;
}
#example3 .front img{
	margin: 4px;
}
#example3 .front h6{
	font-size: 36px;
}
#example3 .front span{
	font-size: 15px;
}

/* The further back items */
#example3 .behind{
	margin-top: 175px;
}
#example3 .behind img{
	margin: 2px;
}
#example3 .behind h6{
	font-size: 22px;
}
#example3 .behind span{
	font-size: 12px;
}	

/* The furthest back items */
#example3 .back{
	margin-top: 250px;
}
#example3 img{
	margin: 1px;
}
#example3 .back h6{
	font-size: 12px;
}
#example3 .back span{
	font-size: 7px;
}

/* That's it for the settings */

#example3{ margin:0 auto; padding:0; position:relative; z-index:1 }
#example3 li{ margin:0; padding:0; list-style:none; position:absolute; z-index:1; display:none; border-width:0px }
#example3 img{ border:0; vertical-align:bottom; width:280px; height:400px }
#example3 span{ display:block; position:absolute; left:0; right:0; bottom:0; text-align:left; cursor:default; opacity:0.7; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter:alpha(opacity=70) }
#example3 h6{ cursor:default }
#example3 a{ cursor:default; text-decoration:none }