/* Courtesy of Michael J. Petruniak [mike.petruniak@gmail.com] */	
body
{
	text-align:center;
}

div#creation_main
{
	background-color:#EBE9DA;
	width:820px;
	height:auto;
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
	border:0px solid #000000;
	margin:0 auto;
	text-align:left;
	padding:0 10px 0 10px;
}

div#text_entry
{
	margin:10px 0 5px 0;
}	

div#text_entry div#text_entry_container
{
	border:0px solid #000000;
}

div#text_entry textarea#text1
{
	height:80px;
	width:98%;
	border:none;
	border-color:#FFFFFF;
	/* Property overflow-y doesn't exist in CSS level 2.1 but exists in [css3] - Firefox workaround ensuring text wraps */
	overflow-y:hidden;
	font-size:16px;
	font-family:Arial, Helvetica, sans-serif;
}

.user_selections
{
	width:inherit;
	padding:5px 0 5px 0;
		border:0px solid #000000; 
}


div.action_text
{
	font-weight:bold;
}

span.side_note /* (approximate) */
{
	font-size:10px;
	font-weight:normal;
	font-style:italic;
}

div#user_selections div#left_pane
{
	border:0px solid #000000;   
	float:left; 
	width:15%;
	height:240px;
	padding:5px;
}

div#user_selections div#color_pane
{
	border:0px solid #000000;  
	float:left; 
	width:660px;

	padding:0px;
}

div#user_selections div#left_pane2
{
	border:0px solid #000000;  
	float:left; 
	width:100px;
	height:125px;
	padding:5px;
}

div#user_selections div#left_pane3
{
	border:0px solid #000000;  
	float:left; 
	width:365px;
	padding:5px;
}

div#color div.swatch_row
{
	overflow:hidden;
	margin:2px 0 2px 0;
	clear:left;
		text-align:center;
}

div.swatch_row div.left_position
{
	float:left;
	margin-right:3px;
}

div.swatch_row div.swatch
{
	width:20px;
	height:20px;
	cursor:pointer;
	border: 1px groove #999999;
}

div#banner_alignment
{ 
	margin:3px 0 8px 0;
	word-spacing:0px;
	border:none;
		text-align:center;
}

div#banner_alignment img, div#buy_button
{ 
	cursor:pointer;

}
div.font
{ 
	cursor:pointer;
	float:left; 
	text-align: center;
	width:160px;
	height:53px;
}

div#user_selections div#right_pane
{
	border:0px solid #000000; 
	float:right;
	width:290px; 
	height:240px;
	padding:5px;
}

div#user_selections div#right_pane2
{
	border:0px solid #000000;   
	float:right;
	width:100px; 
	height:125px;
	padding:5px;
}

div#user_selections div#right_pane3
{
	border:0px solid #000000; 
	float:right;
	width:160px;
	padding:5px;

}

div#checkout
{
	margin:2px 0 5px 0;
	text-align:center;
}

div#user_selections div#middle_pane
{
	border:0px solid #000000; 
	width:290px; 
	height:240px; 
	margin:0 auto;
	text-align:center;
	padding:5px 0 5px 5px;
		/* Property overflow-x & overflow-y doesn't exist in CSS level 2.1 but exists in [css3] */
	overflow-x:hidden;
	overflow-y:scroll;
}

div#user_selections div#middle_pane2
{
	border:0px solid #000000; 
	width:545px; 
	height:125px; 
	margin:0 auto;
	text-align:center;
	padding:5px 0 5px 5px;

}

div#user_selections div#middle_pane3
{
	border:0px solid #000000; 
	float:left;
	width:260px; 
	margin:0 auto;
	padding:5px 0 5px 5px;
	text-align:center;
	vertical-align: top;

}



div#buy_button, div#middle_pane_container, div#right_pane2
{
	text-align:center;
}

div#preview_pane
{
	float:left;
	text-align:center;	
	padding-top:10px;
	margin-left: 0px;
	border:1px solid #000000; 
}

p#props
{
	color:#3D2D97;
	text-align:center;
}

p#props a
{
	text-decoration:none;
}

p#props a:hover
{
	background-color:#FFFF66;
}

/* Color Swatch Hover*/
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.gallerycontainer{
	position: relative;
	height: 20px;
	width: 20px;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.thumbnail img{
border: 0px none white;
margin: 0 0px 0px 0;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
border: 0px solid black;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
white-space: nowrap;
background-color: #fffff4;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0px;
left: 575px; /*position where enlarged image should offset horizontally */
z-index: 50;
}