/*
 * Title: jQuery Boutique plugin CSS
 * Author: Berend de Jong, Frique
 * Author URI: http://frique.me/
 * Version: 1.5.2 (20130729.1)
 *
 * --- FUNCTIONALITY --------------------------------------------------------------------------
 * The following block serves to make Boutique function properly. Don't edit or edit carefully.
 */

.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-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 }

/*
 * --- STYLE ----------------------------------------------------------------------------------
 * 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{}
 */

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

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

/* Headers of all frames */
.boutique-frame-title{
	margin: 0;
	line-height: 1;
	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: #0000FF;
	background: ;
	margin: 0;
	padding: 10px 15px 8px;
	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: 12px;
	text-align:center;
px; /* 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: 18px;
}
.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: 13px;
}
.boutique .back .boutique-frame-text{ /* Back frame description text */
	font-size: 9px;
}