/*
CSS Name: TokToki Custom Select
Description: Style for custom built product option select interface.
Author: Aarfie
Version: 1.0
Author URI: http://aarfie.com/
*/


/* ------------------------------------------------------------- Set Up */

.options.toktoki_options {
	display: none;	
	}

#content #toktoki_options h4 {
	font-size: 14px;
	margin: 0;
	padding: 0;
	}
#content #toktoki_options h4 .pre {
	font-weight: bold;
	padding-right: 5px;
	}

#content #toktoki_options .shape_select h4 {
	margin-bottom: 5px;
	}

.tt_select {
	margin-bottom: 10px;
	}

.tt_select .select_element {
	display: block;
	float: left;
	width: 48px;
	height: 48px;
	margin: 0 2px 2px 0;
	cursor: pointer;
	}

.tt_select .select_element span {
	display: none;
	}

.tt_select.shape_select .necklace_select .select_element {
	width: 64px;
	height: 64px;
	margin: 0 9px 0 7px;
	}

.tt_select.shape_select .earrings_select .select_element {
	width: 78px;
	height: 72px;
	}

/* ------------------------------------------------------------- Shell Select */

.tt_select.shell_select .select_element {
	background: url(../icons/shells.jpg) no-repeat 0 0;	
	}
.tt_select.shell_select #we.select_element {
	background-position: 0 0;
	}
.tt_select.shell_select #wa.select_element {
	background-position: -48px 0;	
	}
.tt_select.shell_select #ca.select_element {
	background-position: -96px 0;	
	}
.tt_select.shell_select #na.select_element {
	background-position: -144px 0;	
	}
.tt_select.shell_select #we.select_element:hover {
	background-position: 0 -48px;
	}
.tt_select.shell_select #wa.select_element:hover {
	background-position: -48px -48px;	
	}
.tt_select.shell_select #ca.select_element:hover {
	background-position: -96px -48px;	
	}
.tt_select.shell_select #na.select_element:hover {
	background-position: -144px -48px;	
	}
.tt_select.shell_select #we.select_element.on {
	background-position: 0 -96px;
	}
.tt_select.shell_select #wa.select_element.on {
	background-position: -48px -96px;	
	}
.tt_select.shell_select #ca.select_element.on {
	background-position: -96px -96px;	
	}
.tt_select.shell_select #na.select_element.on {
	background-position: -144px -96px;	
	}

/* ------------------------------------------------------------- Center Select */

.tt_select.center_select .select_element {
	background: url(../icons/center.jpg) no-repeat 0 0;	
	}
.tt_select.center_select #sc.select_element {
	background-position: 0 0;
	}
.tt_select.center_select #sm.select_element {
	background-position: -48px 0;	
	}
.tt_select.center_select #ol.select_element {
	background-position: -96px 0;	
	}
.tt_select.center_select #iv.select_element {
	background-position: -144px 0;	
	}
.tt_select.center_select #sc.select_element:hover {
	background-position: 0 -48px;
	}
.tt_select.center_select #sm.select_element:hover {
	background-position: -48px -48px;	
	}
.tt_select.center_select #ol.select_element:hover {
	background-position: -96px -48px;	
	}
.tt_select.center_select #iv.select_element:hover {
	background-position: -144px -48px;	
	}
.tt_select.center_select #sc.select_element.on {
	background-position: 0 -96px;
	}
.tt_select.center_select #sm.select_element.on {
	background-position: -48px -96px;	
	}
.tt_select.center_select #ol.select_element.on {
	background-position: -96px -96px;	
	}
.tt_select.center_select #iv.select_element.on {
	background-position: -144px -96px;	
	}

/* ------------------------------------------------------------- Shape - Necklace Select */

.tt_select.shape_select .necklace_select .select_element {
	background: url(../icons/necklaces.jpg) no-repeat 0 0;	
	}
.tt_select.shape_select #be_ne.select_element {
	background-position: 0 0;
	}
.tt_select.shape_select #ch_ne.select_element {
	background-position: -64px 0;	
	}
.tt_select.shape_select #dr_ne.select_element {
	background-position: -128px 0;	
	}
.tt_select.shape_select #ki_ne.select_element {
	background-position: -192px 0;	
	}
.tt_select.shape_select #lo_ne.select_element {
	background-position: -256px 0;	
	}
.tt_select.shape_select #be_ne.select_element:hover {
	background-position: 0 -64px;
	}
.tt_select.shape_select #ch_ne.select_element:hover {
	background-position: -64px -64px;	
	}
.tt_select.shape_select #dr_ne.select_element:hover {
	background-position: -128px -64px;	
	}
.tt_select.shape_select #ki_ne.select_element:hover {
	background-position: -192px -64px;	
	}
.tt_select.shape_select #lo_ne.select_element:hover {
	background-position: -256px -64px;	
	}
.tt_select.shape_select #be_ne.select_element.on {
	background-position: 0 -128px;
	}
.tt_select.shape_select #ch_ne.select_element.on {
	background-position: -64px -128px;	
	}
.tt_select.shape_select #dr_ne.select_element.on {
	background-position: -128px -128px;	
	}
.tt_select.shape_select #ki_ne.select_element.on {
	background-position: -192px -128px;	
	}
.tt_select.shape_select #lo_ne.select_element.on {
	background-position: -256px -128px;	
	}

/* ------------------------------------------------------------- Shape - Earrings Select */

.tt_select.shape_select .earrings_select .select_element {
	background: url(../icons/earrings.jpg) no-repeat 0 0;	
	}
.tt_select.shape_select #be_ea.select_element {
	background-position: 0 0;
	}
.tt_select.shape_select #ch_ea.select_element {
	background-position: -78px 0;	
	}
.tt_select.shape_select #dr_ea.select_element {
	background-position: -156px 0;	
	}
.tt_select.shape_select #ki_ea.select_element {
	background-position: -234px 0;	
	}
.tt_select.shape_select #lo_ea.select_element {
	background-position: -312px 0;	
	}
.tt_select.shape_select #be_ea.select_element:hover {
	background-position: 0 -72px;
	}
.tt_select.shape_select #ch_ea.select_element:hover {
	background-position: -78px -72px;	
	}
.tt_select.shape_select #dr_ea.select_element:hover {
	background-position: -156px -72px;	
	}
.tt_select.shape_select #ki_ea.select_element:hover {
	background-position: -234px -72px;	
	}
.tt_select.shape_select #lo_ea.select_element:hover {
	background-position: -312px -72px;	
	}
.tt_select.shape_select #be_ea.select_element.on {
	background-position: 0 -144px;
	}
.tt_select.shape_select #ch_ea.select_element.on {
	background-position: -78px -144px;	
	}
.tt_select.shape_select #dr_ea.select_element.on {
	background-position: -156px -144px;
	}
.tt_select.shape_select #ki_ea.select_element.on {
	background-position: -234px -144px;	
	}
.tt_select.shape_select #lo_ea.select_element.on {
	background-position: -312px -144px;	
	}


/* ------------------------------------------------------------- Dynamic UI */

#content .toktoki_select .user_notice.error {
	margin-top: 0;
	}

span.ext_loading {
	position: absolute;
	z-index: 300;
	background: #fff url(../icons/loading.gif) no-repeat center center;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;	
	}
.ext_loading span {
	display: none;
	}