/* 
CSS Document for the entire "Wizard area" -> Javascript Enabled!
*/

/*
					***************************************************
					* Linosoft technology Powered By Shirtsdotnet.com *
					***************************************************
*/




/*
	General design notes
		- 10pt = 1.00 em
		- 11pt = 1.07 em
		- 12pt = 1.15 em
*/

/*
*************************************************
*    Global                                     *
*************************************************

	#container makes sure the "wizard area" has the right dimensions.
		- 13px left
		- 15px right
		- 13px top
	
	b is the bold defined by snd
*/

div#container
{
	width:732px;
	padding-left:13px;
	padding-right:15px;
	padding-top:12px;
}

div
{
	z-index:1;
}

b
{
	font-weight:bold;
}

img
{
	border:0px;
}

/*
*************************************************
*    reset session                              *
*************************************************
*/


/*
*************************************************
*    Error                                      *
*************************************************
*/


.SND_error_overlay_critical2
{

	background-color:#FFFFFF;
	border-style:solid;
	border-width:2px;
	position: relative;
	left: 10%;
	width:80%;
	border-color:#CC0000;
}

div#SND_error_overlay_critical
{
	position:absolute;
	top:50%;
	left:47%;
	border-style:solid;
	border-width:2px;
	width:250px;
	z-index:99;
	background-color:#FFFFFF;
}

.SND_error_overlay_critical
{
	border-color:#CC0000;
}

.SND_error_overlay_noncritical
{
	border-color:#FF9901;
}

.SND_error_overlay_confirm
{
	border-color:#128300;
}

div#SDN_error_title
{
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	font-weight:bold;
	padding:6px;
	padding-bottom:0px;
	float:left;
}

.SDN_error_title_critical
{
	color:#CC0000;
}

.SDN_error_title_noncritical
{
	color:#FF9901;
}

.SDN_error_title_confirm
{
	color:#128300;
}

.critical
{
	color:#CC0000;
}

.noncritical
{
	color:#000000;
}

#SDN_error_close
{
	float:right;
	padding:2px;
}

#SDN_error_txt
{
	padding:6px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	font-weight:bold;
}


/*
*************************************************
*    Header                                     *
*************************************************
*/

div#search div#title_design
{
	float:left;
	padding-left:13px;
	line-height:30px;
	vertical-align:bottom;
}

div#search div#title_basket
{
	float:right;
	font-size:1.00em;
	line-height:30px;
	padding-right:34px;
}

#title_basket a
{
	color:#FFFFFF;
	text-decoration:underline
}

/*
*************************************************
*    Step area                                  *
*************************************************
*/

div#stepsarea
{
	width:100%;
	height:26px;
	clear:both;
	font-size:1.07em;
	vertical-align:middle;
	color:#666666;
	border-bottom-color:#000000;
	border-bottom-style:solid;
	border-bottom-width:1px;
}

div#stepsarea .steps
{
	line-height:25px;
	padding-left:9px;
	padding-right:9px;
	float:left;
}

div#stepsarea .active
{
	background-color:#666666;
	color:#FFFFFF;
	
	border-bottom-color:#FFFFFF;
	border-bottom-style:solid;
	border-bottom-width:1px;
	font-weight:bold;
}

div#stepsarea .price
{
	line-height:25px;
	background-color:#F0F0F0;
	font-size:1.15em;
	float:right;
	width:172px;
	padding-left:10px;
	border-bottom-color:#F0F0F0;
	border-bottom-style:solid;
	border-bottom-width:1px;
}

/*
*************************************************
*   Main content                                *
*************************************************
*/

div#maincontent
{
	clear:both;
	height:485px;
	overflow:auto;
	margin-top:2px;
	margin-bottom:2px;
	margin-right:0px;
	padding-right:0px;
	border-top-color:#D3D3D3;
	border-top-style:solid;
	border-top-width:3px;
	border-bottom-color:#D3D3D3;
	border-bottom-style:solid;
	border-bottom-width:3px;
	border-left-color:#D3D3D3;
	border-left-style:solid;
	border-left-width:1px;
	border-right-color:#D3D3D3;
	border-right-style:solid;
	border-right-width:1px;
	overflow:hidden;
	
}

div#maincontent div#options
{
	float:left;
	border-right-color:#D3D3D3;
	border-right-style:solid;
	border-right-width:1px;
	width:248px;
	min-height:374px;
	height:374px;
}

/*css hack for IE6 min-height problem... */
div#maincontent > div#options
{
	height:auto;
	min-height:374px;
}
/* 
caution! do not change this width, as it will affect the position of the shirt, and thus the position of the shortcuts!
*/
div#maincontent div#shirt
{
	float:left;
	min-height:374px;
	height:374px;
	width:472px;
	overflow:visible;
	
}

div#shirt div#shirtbackground
{
	background-position:top center;
	background-repeat:no-repeat;
	background-attachment:scroll;
	height:374px;
	width:372px;
	position:absolute;
	
}

div#maincontent div#shortcuts
{
	float:right;
	z-index:1;
}


.knopdr
{
	position: relative;
	left:134px;
}

.knopdr2
{
	position: relative;
	left:134px;
	bottom:15px;
}	

/*
*************************************************
*   Main content: optionspanel                  *
*************************************************
*/

div#options h2
{
	color:#000000;
	font-size:1.07em;
	font-weight:bold;
	margin:0px;
	border-bottom-color:#D6D6D6;
	border-bottom-style:solid;
	border-bottom-width:1px;
	
	background-image:url(images_layout/bg_h2.jpg);
	background-repeat:repeat-x;
}

div#options a:hover
{
	text-decoration:none;
	text-decoration:none !important;
}

div#options h2 a
{
	display:block;
	height:16px;
	vertical-align:bottom;
	text-decoration:none;
	padding-left:11px;
	padding-top:2px;
}

div#options .panelcontent
{
	font-size:1.00em;
	border-bottom-color:#D6D6D6;
	border-bottom-style:solid;
	border-bottom-width:1px;
	padding-left:17px;
	clear:both;

}

div.content_padding_left
{
	padding-left:15px;
}

div#options .open
{
	display:block;
}

div#options .closed
{
	display:none;
}


/*
*************************************************
*   Main content: ul styling                    *
*************************************************
*/

ul.radiolist {
	margin: 0;
	padding: 0;
	padding-top:5px;
	list-style-type: none;
	z-index:1;
	float:left;
	text-align:center;
}

ul.radiolist li{
	display:inline;
	list-style-type:none;
	background:none;
	list-style-image:none;
	list-style-position:inside;
	float:left;
	height:100px;
	margin:0px;
	padding:0px;
}

li.li_large
{
	width:70px;
}

li.li_small
{
	width:55px;
}

li.li_extreme_small
{
	width:45px;
}

ul.radiolist li img
{
	border: 2px solid #FFFFFF;
}

ul.radiolist li h3
{
	font-size:1.00em;
	font-weight:normal;
}

ul.radiolist li img.radio_selected
{
	border: 2px solid #000000;
}

div.infopopup
{
	display:none;
	background-color:#FFFFFF;
	border:2px solid #000000;
	overflow:auto;
	text-align:left;
	padding:2px;
}

div.infopopup p, div.infopopup h3
{
	text-align:left;
	padding:2px;
}

div.over
{
	display:block;
	z-index:10;
	position:absolute;
	border-width:4px;
}

div.infopopup
{
	width:100%;
}

/*
*************************************************
*   Main content: pocket specific               *
*************************************************
*/

#pockettext
{
	float:left;
	width:140px;
}

#pockettext_no, #pockettext_yes
{
	float:left;
}

#pockettext_no
{
	padding-right:20px;
}

#pocketimage
{
	float:left;
	padding:6px;
}

/*
*************************************************
*   Main content: monogram specific             *
*************************************************
*/

#mono_inl_txt
{
	float:left;
	width:160px;
	padding-bottom:5px;
}

#mono_yesno
{
	float:left;
}

#monogram_no
{
	float:left;
	padding-right:10px;
}

#monogram_yes
{
	float:left;
}

#mono_input
{
	float:left;
	padding-right:10px;
	width:69px;
}

#mono_colors
{
	float:left;
}

#mono_colors, #mono_font, #mono_placement
{
	padding-bottom:5px;
}

.mono_on_shirt
{
	display:block;
}

.mono_not_on_shirt
{
	display:none;
}

/*
*************************************************
*   Main content: fit specific                  *
*************************************************
*/

#measures_selection
{
	padding-left:10px;
}

.label_select_measures
{
	width:60px;
	float:left;
}

#measures_txt
{
	padding-bottom:5px;
}

.fit_hoogte
{
	height:180px;
}

div#measures_link
{
	behavior: url('script/hover.htc');
}

div#measures_link u
{
	cursor:pointer;
}

div#measures_link div
{
	display:none;
	/*visibility:hidden;*/
	background-color:#FFFFFF;
	border:2px solid #000000;
	text-align:left;
	padding:2px;
	/*overflow:auto;*/
	width:375px;
}

div#measures_link:hover div, div#measures_link.hover div
{
	position:absolute;
	top:590px;
	left:15%;
	/*overflow:auto;*/
	display:block;
	/*visibility:visible;*/
	z-index:100:
}

div#measures_link1
{
	behavior: url('script/hover.htc');
}

div#measures_link1 u
{
	cursor:pointer;
}

div#measures_link1 div
{
	display:none;
	/*visibility:hidden;*/
	background-color:#FFFFFF;
	border:2px solid #000000;
	text-align:left;
	padding:2px;
	/*overflow:auto;*/
	width:375px;
}

div#measures_link1:hover div, div#measures_link1.hover div
{
	position:absolute;
	top:415px;
	left:15%;
	/*overflow:auto;*/
	display:block;
	/*visibility:visible;*/
	z-index:100:
}

div#fit_txt_title, div#measures_txt
{
	padding-top:5px;
	font-weight:bold;
}


/*
*************************************************
*   Main content: review specific               *
*************************************************
*/

.summary_title
{
	float:left;
	font-weight:bold;
}

.summary_txt
{
	float:left;
}

.summary_name
{
	float:left;
	width:100px;
}

.summary_value
{
	float:left;
}

.summary_change
{
	float:right;
	padding-top:2px;
	padding-right:2px;
	padding-bottom:2px;
}


/*
*************************************************
*   Main content: shortcuts                     *
*************************************************
*/

.shortcut_title
{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	color:#999999;
	padding-left:2px;
	/*display:none;/*here to disable titles*/
}

.shortcutcontainer
{
	vertical-align:middle;
	text-align:center;
	display:table-cell;
	width:68px;
	height:68px;
}

.shortcutcontainer_placket
{
	vertical-align:middle;
	text-align:center;
	display:table-cell;
	width:33px;
	height:103px;
}

.shortcutcontainer_pocket
{
	vertical-align:middle;
	text-align:center;
	display:table-cell;
	width:73px;
	height:73px;
}

.shortcutcontainer_cuff
{
	vertical-align:middle;
	text-align:center;
	display:table-cell;
	width:81px;
	height:81px;
}

.shortcutcontainer_cuff_short
{
	vertical-align:middle;
	text-align:center;
	display:table-cell;
	width:81px;
	height:81px;
}

.shortcutcontainer_collar
{
	vertical-align:middle;
	text-align:center;
	display:table-cell;
	width:101px;
	height:101px;
}

.shortcutcontainer_hem
{
	vertical-align:middle;
	text-align:center;
	display:table-cell;
	width:164px;
	height:62px;
}

.shortcut_global
{
	position:relative;
	width:69px;
	height:69px;
}

.shortcut_global_placket
{
	position:relative;
	width:34px;
	height:104px;
}

.shortcut_global_pocket
{
	position:relative;
	width:74px;
	height:74px;
}

.shortcut_global_cuff
{
	position:relative;
	width:82px;
	height:82px;
}

.shortcut_global_cuff_short
{
	position:relative;
	width:82px;
	height:82px;
}


.shortcut_global_collar
{
	position:relative;
	width:102px;
	height:102px;
}

.shortcut_global_hem
{
	position:relative;
	width:165px;
	height:63px;
}

/*
caution! if you make the image bigger than 54 pixels, you have to increment the widht and height of 
	- div#shirt .shortcutcontainer
	- div#shirt .shortcut_global
	- div#shirt .shortcut_dark_active
with the same amount of pixels!
*/
.shortcut_dark_inactive
{
	border-color:#999999;
	border-style:solid;
	border-width:2px;
	width:60px;
	height:60px;
}

.shortcut_dark_active
{
	border-color:#000000;
	border-style:solid;
	border-width:4px;
	width:60px;
	height:60px;
}

.shortcut_dark_inactive_placket
{
	border-color:#999999;
	border-style:solid;
	border-width:2px;
	width:25px;
	height:95px;
}

.shortcut_dark_active_placket
{
	border-color:#000000;
	border-style:solid;
	border-width:4px;
	width:25px;
	height:95px;
}

.shortcut_dark_inactive_pocket
{
	border-color:#999999;
	border-style:solid;
	border-width:2px;
	width:65px;
	height:65px;
}

.shortcut_dark_active_pocket
{
	border-color:#000000;
	border-style:solid;
	border-width:4px;
	width:65px;
	height:65px;
}

.shortcut_dark_inactive_cuff
{
	border-color:#999999;
	border-style:solid;
	border-width:2px;
	width:73px;
	height:73px;
}

.shortcut_dark_active_cuff
{
	border-color:#000000;
	border-style:solid;
	border-width:4px;
	width:73px;
	height:73px;
}

.shortcut_dark_inactive_cuff_short
{
	border-color:#999999;
	border-style:solid;
	border-width:2px;
	width:73px;
	height:73px;
}

.shortcut_dark_active_cuff_short
{
	border-color:#000000;
	border-style:solid;
	border-width:4px;
	width:73px;
	height:73px;
}

.shortcut_dark_inactive_collar
{
	border-color:#999999;
	border-style:solid;
	border-width:2px;
	width:93px;
	height:93px;
}

.shortcut_dark_active_collar
{
	border-color:#000000;
	border-style:solid;
	border-width:4px;
	width:93px;
	height:93px;
}

.shortcut_dark_inactive_hem
{
	border-color:#999999;
	border-style:solid;
	border-width:2px;
	width:156px;
	height:54px;
}

.shortcut_dark_active_hem
{
	border-color:#000000;
	border-style:solid;
	border-width:4px;
	width:156px;
	height:54px;
}

/* 
here's the code for the rollovers.. JS shows them, normally, lol...
*/
div#shortcut_rollover
{
	position:absolute;
}

div.rollover
{
	position:absolute;
	width:200px;
	z-index:99;
	overflow:auto;
	display:block;
}

div.rollover_arrow
{
	padding-top:5px;
}

div.rollover_text
{
	overflow:auto;
	width:92px;
	background-color:#FFFFFF;
	padding:2px;
	display:none;
	z-index:95;
}

div.rollover_text1
{
	overflow:auto;
	width:92px;
	/*background-color:#FFFFFF;*/
	padding:2px;
	display:none;
	z-index:95;
}


div.rollover_text h4
{
	font-weight:bold;
	font-size:1.07em;
	color:#000000;
	margin:0px;
}

div.rollover_right
{
	float:left;
}

div.rollover_left
{
	float:right;
	text-align:right;
}

/* 
specify the left and top position of all the shortcuts.
*/


/* NOTE: correct positioning of these elements should be done in a later phase. */
div#shirt .shortcut_collar
{
	left:135px;
	top:6px;
}

div#shirt .shortcut_pocket
{
	left: 197px;
	top: 21px;
}

div#shirt .shortcut_placket
{
	left: 168px;
	top: -72px;
}

div#shirt .shortcut_cuff
{
	left: 101px;
	top: -75px;
}

div#shirt .shortcut_cuff_short
{
	left: 55px;
	top: -600px;
}

div#shirt .shortcut_hem
{
	left: 101px;
	top: -78px;
}

div#shirt .shortcut_fabric
{
	left: 405px;
	top: -420px;
}

div#shirt .shortcut_backyoke
{
	left: 405px;
	top: -400px;
}

div#shirt .shortcut_monogram
{
	left: 405px;
	top: -380px;
}

div#mono_text_img
{
	top: -40px;
	position:relative;
	text-align:center;
}

div#monogram_on_shirt
{
	position:relative;
	width:14px;
}

div#shirt .shortcut_fit
{
	left: 405px;
	top: -360px;
}

/* END NOTE */

/*
*************************************************
*    Buttons                                    *
*************************************************
*/

div#buttons
{
	border-top-color:#000000;
	border-top-style:solid;
	border-top-width:1px;
	background-color:#F0F0F0;
	clear:both;
	
	min-height:23px;
	padding-top:3px;
	padding-right:16px;
	padding-left:14px;
	vertical-align:bottom;
	height:23px;
}

/* css hack to get the height back to auto in Opera. Using the "Be nice to Opera" hack and the "Owen" hack */
html>body div#buttons { height: auto; }
head:first-child+body div#bttons { height:auto; }


div#buttons input
{
	margin:0px;
	padding:0px;
	padding-bottom:1px !important;
	border:0px;
	font-size:0px;
}

div#buttons .fright
{
	float:right;
	vertical-align:bottom;
	
}

div#buttons .fleft
{
	float:left;
}

div#buttons .right_ten
{
	margin-right:10px;
}