@charset "UTF-8";
/* CSS Document */

/*#content img					{ margin-top: 15px; }*/

#suit_styles div div.suit_sub_style		{ clear: both; width: auto; padding: 0; margin: 0 20px 40px 0; }

#suit_styles div div.product_details	{ float: left; width: 280px; margin: 0 20px 20px 0; padding: 0; }

/* This class clears all floats after the third .product_details div to ensure that the next row starts all the way to the left (for use only when the heights of the divs in the row above cause float problems) */
#suit_styles br.new_row		{ clear: both; }

#suit_styles div h4,
#suit_styles div h5		{ margin: 15px 0 3px; }

/* Styles the headers for each "tab" section - the headers are hidden dynamically in the _global_head.php file so that they show up if a user does not have JS enabled to display the tabs in the first place (because if JS is enabled and the tabs are working properly, each highlighted tab acts as its own header (visually, at least)) */
#suit_styles div h4		{ clear: both; margin: 20px 0; border-bottom: 2px solid #000; text-transform: uppercase; font-weight: bold; }

#suit_styles div h6		{ margin-top: 10px; margin-bottom: 3px; border-bottom: 1px solid #CCCCCC; }

#suit_styles div img	{ margin: 0 auto; }

#content div ul.ensemble_parts li				{ display: block; }
#content div ul.ensemble_parts li span	{ font-weight: bold; }

ul.style_details li		{ display: inline; }

ul.style_details li.size,
ul.style_details li.color,
ul.style_details li.ce_marked,
ul.style_details li.quantity,
ul.style_details li.weight				{ display: block; }

/* These rules provide identifying terms into certain recurring pieces of info in the product list */
ul.style_details li.size:before				{ content: "size: "; }
ul.style_details li.color:before			{ content: "color: "; }
/*#suit_styles div div.product_details li.ce_marked:before					{ content: "CE marked: "; }*/
ul.style_details li.quantity:before		{ content: "quantity: "; }
ul.style_details li.weight:before			{ content: "weight: "; }

ul#product_highlights						{ float: left; margin: 0 0 20px 0; width:240px; padding:0; }
	ul#product_highlights li			{ float: left; clear: left; margin: 10px 0 0; padding:0; width:240px;}
	ul#product_highlights li img	{ float: left; margin: 0 20px 0 0; }

/* ----------------
	 =TABS_PANEL
---------------- */

.ui-tabs-nav, .ui-tabs-panel {
font-size:9px;
}

.ui-tabs-nav {
    list-style: none;
    margin: 0 0;
    padding: 0 0 0 3px;
}

.ui-tabs-nav:after { /* clearing without presentational markup, IE gets extra treatment */
   /* display: block;
    clear: both;
    content: " ";*/
}

.ui-tabs-nav li {
    float: left;
		padding: 0;
    margin: 0 0 0 2px;
    font-weight: normal;
	border-top:1px solid #000;
	border-right:1px solid #000;
	border-left:1px solid #000;
}

.ui-tabs-nav a, .ui-tabs-nav a span {
    float: left; /* fixes dir=ltr problem and other quirks IE */
    padding: 0 12px;
	font-size:11px;
}

.ui-tabs-nav a {
		height: 2em;
		padding-top: 3px;
    padding-left: 0;
		margin: 0; /* position: relative makes opacity fail for disabled tab in IE */
    background-position: 100% 0;
		background-color:#CCCCCC;
    text-decoration: none;
    white-space: nowrap; /* @ IE 6 */
    outline: 0; /* @ Firefox, prevent dotted border after click */
}

.ui-tabs-nav a:link, .ui-tabs-nav a:visited {
    color: #000;
}

.ui-tabs-nav .ui-tabs-selected a {
    position: relative;
    top: 1px;
    z-index: 2;
    margin-top: 0;
    background-position: 100% -23px;
		background-color: #FFF;
}

.ui-tabs-nav a span {
    padding-top: 1px;
    padding-right: 0;
    background-position: 0 0;
    line-height: 20px;
}

.ui-tabs-nav .ui-tabs-selected a span {
    padding-top: 0;
    background-position: 0 -23px;
	
}

.ui-tabs-nav .ui-tabs-selected a:link, .ui-tabs-nav .ui-tabs-selected a:visited,

.ui-tabs-nav .ui-tabs-disabled a:link, .ui-tabs-nav .ui-tabs-disabled a:visited { /* @ Opera, use pseudo

 classes otherwise it confuses cursor... */
    cursor: text;
}

.ui-tabs-nav a:hover, .ui-tabs-nav a:focus, .ui-tabs-nav a:active,

.ui-tabs-nav .ui-tabs-unselect a:hover, .ui-tabs-nav .ui-tabs-unselect a:focus, .ui-tabs-nav .ui-tabs-unselect

 a:active { /* @ Opera, we need to be explicit again here now... */
    cursor: pointer;
}

/*.ui-tabs-disabled {
    opacity: .4;
    filter: alpha(opacity=40);
}*/

.ui-tabs-nav .ui-tabs-disabled a:link, .ui-tabs-nav .ui-tabs-disabled a:visited {
    color: #fff;
}

.ui-tabs-panel {
		float: left;
    border: 1px solid #333;
    padding: 20px 0 0 20px;
		margin: 0 0 20px 0;
		width: 900px; 
    background: #fff; /* declare background color for container to avoid distorted fonts in IE while
 fading */
}

/*.ui-tabs-loading em {

    padding: 0 0 0 20px;

    background: url(loading.gif) no-repeat 0 50%;

}*/

/* Additional IE specific bug fixes... */

* html .ui-tabs-nav { /* auto clear @ IE 6 & IE 7 Quirks Mode */
    display: inline-block;

}

*:first-child+html .ui-tabs-nav  { /* auto clear @ IE 7 Standards Mode - do not group selectors, otherwise
 IE 6 will ignore complete rule (because of the unknown + combinator)... */
    display: inline-block;

}


/* ----------------
	 =PAGE-SPECIFIC
---------------- */

body #content #col_1 ul	{
	margin-bottom: 15px;
}

.products #col_2 h3	{ margin-top: 10px; }

.provent.three_column #col_2 				{ width: 320px; padding-left: 0; padding-right: 0; }
	.provent.three_column #col_2 img	{ display: block; margin: 10px auto 0; }

/*.products#zytron*/ .product_logos		{ float: left; width: 58px; margin: 0 6px 2px 0; }
.products#zytron .photo_suit			{ float: right; }
.products#zytron #col_3	{ padding-right: 0; margin-top: -60px; }

.products #col_1_2 .ui-tabs-panel	{ width: 600px; }

#suit_styles div div.suit_sub_style .product_details	{ width: 260px; }

.products#zytron_500 img.suit_photo	{ margin-bottom: 36px; }