@charset "UTF-8";
/*	SCREEN IMPORT
	$Id: //depot/projects/dylan/releases/rc_16_11_1/ubi/template/identity/adobe/screen.css#1 $
*/
@import url(screen/icon.css);
@import url(screen/data.css);
@import url(screen/list.menu.css);
@import url(screen/star.css);
@import url(screen/common.css);

.LayoutBreakAfter {
	display: block;
	min-height: 0;
}

.LayoutBreakAfter:after,
.globalnav__menu-bar__list:after
{
	clear: both;
	content: " ";
	display: block;
	height: 0;
}

#content-header h1, /* useful until the SEO update is completed across all CS4 pages */
#brand-label
{
	position: relative;
	top: 0;
	left: 0;
	font-weight: normal;
	font-size: 30px;
	line-height: normal;
	color: #FFFFFF;
	padding: 28px 24px 16px 16px;
	margin: 0;
}


/*--- ACCESS LINK
---*/
#accesslink {
	display: block;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	text-indent: -9999px;
	line-height:1;
}
/*-------------------------------------------------------------------	

	CLEARING

-------------------------------------------------------------------*/

br.clear-both,
div.clear-both,
br.clear-left,
div.clear-left {
	font: 1px/1px monospace;
	display: block;
}

.clear-both { clear: both; }

.clear-left { clear: left; }

.clear-both:after,
.clear-after:after { /* IE 8 Beta */
	content: "\0020";
	display: block;
	height: 0;
	clear: both;
}

.clear-after::after {
	content: "\0020";
	display: block;
	height: 0;
	clear: both;
}

.clear-after {
	_height: 1%;/*---IE sub7---*/
	min-height: 1px;
}


/*-------------------------------------------------------------------

	CLIPPED CONTENT
	author: @jmok
	editor: @jmok, @btapley
	
-------------------------------------------------------------------*/

.clip-top { margin-top: 0; }

.clip-bottom { margin-bottom: 0; }

ul.clip-bottom { margin-bottom: 0 !important; }

.clip-sides { 
	margin-left: -16px;
	margin-right: -16px;
}

.clip-sides img {
	_position: relative; /*--- in IE6, prevent clipping of full bleed images. Other layout mode triggers not working. Testing: http://www.stage.adobe.com/products/flashplayer/ ---*/
}

.clip-left { margin-left: -16px; }
.clip-right { margin-right: -16px; }

/*	COMPACT	$Revision: #1 $
	float child elements, clear floats
*/

.compact>* { float: left; }


.compact:after { /* IE8 Beta 1 */
	content: "\0020";
	display: block;
	height: 0;
	clear: both;
}

.compact::after {
	content: "\0020";
	display: block;
	height: 0;
	clear: both;
}

.compact {
	_height: 1em;/*---IE sub7---*/
	min-height: 1px;
}

.compact {
	 padding-bottom: 1px;
	 _behavior: url(/lib/com.adobe/remedy/compactWsFix.htc);
 }

.compact>p,
.compact>span {
	margin-right: 1ex;
	margin-bottom: 0;
	padding: 0;
}

dl.compact>dd { margin-left: 0; }

/*--- For IE 6 and below ---*/

ul.compact li,
ol.compact li,
dl.compact dd,
div.compact p { /*---IE sub7---*/
	_display: inline;
	_float: left;
}

dl.compact * dd ol.compact * li,
ul.compact * li,
div.compact * p { /*---IE sub7---*/
	_display: block;
	_float: none;
}

dl.compact dd { _margin-left: 0; }

div.compact p { /*---IE sub7---*/
	_margin-right: 1ex;
	_margin-bottom: 0;
	_padding: 0;
}

h3.compact span,
h4.compact span {
	_float: left;
	_margin-right: 1ex;
}

h3.compact span span,
h4.compact span span {
	_float: none;
	_margin-right: 0;
}

/*-------------------------------------------------------------------

	MAX
	Prevent element width from breaking out of or expanding 
	the width of it's container.

-------------------------------------------------------------------*/

a.max,
span.max {
	display: block;
}

.max {
	width: 100%;
	text-overflow: ellipsis;
	overflow: hidden;
}

input.max,
textarea.max {
	-moz-box-sizing: border-box;
	width: 100%;
	/* fix broken width caclation in IE 6 and below */
	_behavior: url(/lib/com.adobe/remedy/maxCalcFix.htc);
	*width:97%;
}

textarea.max {
	overflow: auto;
}


select.max {
	width: 100%;
	/* make the select horizonally expand so you can read it when focused */
	behavior: url(/lib/com.adobe/remedy/revealOverflowX.htc);
	_behavior: url(/lib/com.adobe/remedy/revealOverflowX.htc) url(/lib/com.adobe/remedy/maxCalcFix.htc); 
}



/*-----------------------------------------------------------------------

	Group: Blockcode 
	
	$Revision: #1 $
	@author btapley
	
-----------------------------------------------------------------------*/

/*-----------------------------------------------------------------------

	Objects: pre, blockcode
		Selectors with extended overflow control
		
	Usage:
>	<pre></pre>
>
>	<blockcode></blockcode>
		
-----------------------------------------------------------------------*/

pre, blockcode {
	display:block;
	padding: 1em 0 1.5em;
	margin:1em 0;
	white-space:pre;
	background-color:#F0F6FC;
	
	_width: 100%;
	overflow-x:auto;
}
html>body pre, blockcode {
	/*\*/
	overflow:auto;
	/*/
	display:inline-block;
	padding-left:0;
	padding-right:0;
	width:100%;
	/**/
}

/*-----------------------------------------------------------------------

	Objects: pre strong, blockcode strong
		Selectors with color, instead of weight, emphasis
		
	Usage:
>	<pre>
>		<strong></strong>
>	</pre>
>
>	<blockcode>
>		<strong></strong>
>	</blockcode>
		
-----------------------------------------------------------------------*/
pre strong, blockcode strong {
	font-weight: normal;
	background-color: #F9F9B7;
}

/*-----------------------------------------------------------------------

	Object: .css-comment
		Syntax highlight
		
	Usage:
>	<span class="css-comment"></span>
		
-----------------------------------------------------------------------*/
.css-comment{color:#999}
/*-----------------------------------------------------------------------

	Object: .css-import
		Syntax highlight
		
	Usage:
>	<span class="css-import"></span>
		
-----------------------------------------------------------------------*/
.css-import {color:#099}
/*-----------------------------------------------------------------------

	Object: .css-important
		Syntax highlight
		
	Usage:
>	<span class="css-important"></span>
		
-----------------------------------------------------------------------*/
.css-important {color:#F00}
/*-----------------------------------------------------------------------

	Object: .css-media
		Syntax highlight
		
	Usage:
>	<span class="css-media"></span>
		
-----------------------------------------------------------------------*/
.css-media {color:#900}
/*-----------------------------------------------------------------------

	Object: .css-property
		Syntax highlight
		
	Usage:
>	<span class="css-property"></span>
		
-----------------------------------------------------------------------*/
.css-property {color:#009}
/*-----------------------------------------------------------------------

	Object: .css-selector
		Syntax highlight
		
	Usage:
>	<span class="css-selector"></span>
		
-----------------------------------------------------------------------*/
.css-selector {color:#F0F}
/*-----------------------------------------------------------------------

	Object: .css-string
		Syntax highlight
		
	Usage:
>	<span class="css-string"></span>
		
		
-----------------------------------------------------------------------*/
.css-string {color:#060}
/*-----------------------------------------------------------------------

	Object: .css-value
		Syntax highlight
		
	Usage:
>	<span class="css-value"></span>
				
-----------------------------------------------------------------------*/
.css-value {color:#00F}
/*-----------------------------------------------------------------------

	Object: .css-display
		Syntax highlight
		
	Usage:
>	<span class="css-display"></span>
				
-----------------------------------------------------------------------*/
.css-display {color:#990099}
/*-----------------------------------------------------------------------

	Object: .css-image
		Syntax highlight
		
	Usage:
>	<span class="css-image"></span>
				
-----------------------------------------------------------------------*/
.css-image {color:#906}

/*	PULLOUT $Revision: #1 $
		@author btapley
		http://webdev/wiki/index.php/Pullout
*/

/*---	BASE
		just need to override "p img" in "/lib/css/layout/common.css"
---*/
p.pullout-item img { margin-right: 0; }

/*---	CONTAINER
		Pullout acts like a compact container, the following rules copy "/lib/css/units/compact.css"
---*/
.pullout-left,
.pullout-right { 
	_height: 1em; 
	-moz-column-count: 0;
}

.pullout-left {
	*margin-left: 0;
	*display: inline-block;
}

.pullout-left:after, /* IE 8 Beta */
.pullout-right:after /* IE 8 Beta */ {
	content: "\0020";
	clear: both;
	display: block;
	height: 0;
}

.pullout-left::after, 
.pullout-right::after {
	content: "\0020";
	clear: both;
	display: block;
	height: 0;
}

/*---	ITEM ALIGNMENT
		float items then,
		for IE sub7, 
			if pullout left or right, 
				stretch the item to 100% and set a gutter width between the item and other content.
			if wrap, 
				reset item height to auto and use gutter defined for left or right
		for Others, 
			if pullout left or right,
				add a margin to other content equal to the item and gutter width
			if wrap,
				add gutter between item and other content
---*/

.pullout-item {
	_height: 100%;/*---IE sub7---*/
}

.pullout-left .pullout-item {
	float: left;
	margin-left: 0 !important;
	_margin-right: 6px; /*---TODO: supposed to be 10px, where's the extra coming from? ---*/
	_margin-bottom: 100%;
}

.left-wrap .pullout-item,
.right-wrap .pullout-item { 
	_height: auto;/*---IE sub7---*/
	_margin-bottom: auto;
}

.right-wrap .pullout-item { clear: right; }

.left-wrap .pullout-item { clear: left; }

.pullout-left .compact { display: table; }

.pullout-left .compact::after {	display: none; }

.pullout-right .pullout-item {
	float: right;
	margin-right: 0 !important;
	_margin-left: 6px; /*---TODO: supposed to be 10px, where's the extra coming from? ---*/
}

div.left-wrap>.pullout-item { margin-right: 10px; }

.pullout-left>span { display: block; }

/*--- These 2 IE workarounds below for direct child support look insane, but the override rules are VERY tricky when it comes to properties like 
display (other properties like border work fine without all this). Here I'm Adding the '*' before the className to negate it's importance-- 
allowing me style the display of all spans within another element differently ---*/

*.pullout-left span,
*.pullout-left *.pullout-left span { _display: block; }

*.pullout-left *.pullout-left * span,
*.pullout-left * span { _display: inline; }

div.right-wrap>.pullout-item { margin-left: 10px; }

a.pullout-left,
a.pullout-right {
	display: block;
	_cursor: hand;
}

div.pullout-wrap>* { margin-left: 0; }

div.left-wrap>.pullout-item { margin-right: 10px; }

div.right-wrap>.pullout-item { margin-left: 10px; }

.left-360 .pullout-item,
.right-360 .pullout-item { width: 360px; }

.left-270 .pullout-item,
.right-270 .pullout-item { width: 270px; }

.left-190 .pullout-item,
.right-190 .pullout-item { width: 190px; }

.left-190 .pullout-item span,
.right-190 .pullout-item span { right: 0 }

.left-180 .pullout-item,
.right-180 .pullout-item { width: 180px; }

.left-155 .pullout-item,
.right-155 .pullout-item { width: 155px; }

.left-140 .pullout-item,
.right-140 .pullout-item { width: 140px; }

.left-125 .pullout-item,
.right-125 .pullout-item { width: 125px; }

.left-112 .pullout-item,
.right-112 .pullout-item { width: 112px; }

.left-100 .pullout-item,
.right-100 .pullout-item { width: 100px; }

.left-90 .pullout-item,
.right-90 .pullout-item { width: 90px; }

.left-80 .pullout-item,
.right-80 .pullout-item { width: 80px; }

.left-72 .pullout-item,
.right-72 .pullout-item { width: 72px; }

.left-71 .pullout-item,
.right-71 .pullout-item { width: 71px; }

.left-51 .pullout-item,
.right-51 .pullout-item { width: 51px; }

.left-60 .pullout-item,
.right-60 .pullout-item { width: 60px; }

.left-50 .pullout-item,
.right-50 .pullout-item { width: 50px; }

.left-40 .pullout-item,
.right-40 .pullout-item { width: 40px; }

.left-20 .pullout-item,
.right-20 .pullout-item { width: 20px; }

.left-16 .pullout-item,
.right-16 .pullout-item { width: 16px; }

.left-16 .pullout-item { margin-right: 0; /*---TODO: 4px seems to be the munged value added to IE, why? ---*/ }

.right-16 .pullout-item { margin-left: 0; /*---TODO: 4px seems to be the munged value added to IE, why? ---*/ }

.left-360>* { margin-left: 370px !important; }
.right-360>* { margin-right: 370px !important; }

.left-270>* { margin-left: 280px !important; }
.right-270>* { margin-right: 280px !important; }

.left-190>* { margin-left: 200px !important; }
.right-190>* { margin-right: 200px !important; }

.left-180>* { margin-left: 190px !important; }
.right-180>* { margin-right: 190px !important; }

.left-155>* { margin-left: 165px !important; }

.right-155>* { margin-right: 165px !important; }

.left-140>* { margin-left: 150px !important; }

.right-140>* { margin-right: 150px !important; }

.left-125>* { margin-left: 135px !important; }

.right-125>* { margin-right: 135px !important; }

.left-112>* { margin-left: 122px !important; }

.right-112>* { margin-right: 122px !important; }

.left-100>* { margin-left: 110px !important; }

.right-100>* { margin-right: 110px !important; }

.left-90>* { margin-left: 100px !important; }

.right-90>* { margin-right: 100px !important; }

.left-80>* { margin-left: 90px !important; }

.right-80>* { margin-right: 90px !important; }

.left-72>* { margin-left: 82px !important; }

.right-72>* { margin-right: 82px !important; }

.left-71>* { margin-left: 81px !important; }

.right-71>* { margin-right: 81px !important; }

.left-60>* { margin-left: 70px !important; }

.right-60>* { margin-right: 70px !important; }

.left-50>* { margin-left: 60px !important; }

.right-50>* { margin-right: 60px !important; }

.left-51>* { margin-left: 61px !important; }

.right-51>* { margin-right: 61px !important; }

.left-40>* { margin-left: 50px !important; }

.right-40>* { margin-right: 50px !important; }

.left-20>* { margin-left: 28px !important; }

.right-20>* { margin-right: 28px !important; }

.left-16>* { margin-left: 20px !important; }

.right-16>* { margin-right: 20px !important; }

/*-------------------------------------------------------------------

	FORM 
	$Id: //depot/projects/dylan/releases/rc_16_11_1/ubi/template/identity/adobe/screen/form.css#1 $
	@author btapley
	
-------------------------------------------------------------------*/

/*-------------------------------------------------------------------

	LAYOUT

-------------------------------------------------------------------*/

.formBlock {
	padding-top: 12px;
	padding-bottom: 12px;
	margin-top: 0;
	margin-bottom: 0;
}

.inputBlock {
	margin-top: 0;
	margin-bottom: 0;
}

.inputBlock p {
	margin-bottom: 6px;
}

.inputBlock dt {
	font-weight: bold;
	margin-top: 0;
	margin-bottom: 6px;
}

.inputBlock dd {
	margin-left: 0;
	margin-bottom: 6px;
}

.inputBlock .inputGroup {
	margin-left: 0;
}

.inputGroup {
	list-style-type: none;
	padding-left: 0;
	margin-top: 0;
	margin-bottom: 6px;
}

.inputGroup li {
	margin-bottom: 0;
	padding-bottom: 0; /*override default glue*/
	padding-right: 1ex; /* Mac IE freaks on margin-right, use padding instead */
}

.inputGroup .left {
	font-weight: normal;
}

.inputGroup .caption {
	margin-top: .25em;
	margin-bottom: 0;
}

.pullout-left > * > .inputGroup { /* Hack non-IE to correctly position lists in a dd in forms */
	display: table;
	margin-bottom: 0;
}

.buttonBlock { display:block; }

div.buttonBlock {
	margin-top: 2em;
	margin-bottom: 0;
}

span.buttonBlock { margin-top: 1em; }

/*-------------------------------------------------------------------

	BASE

-------------------------------------------------------------------*/

input,
button,
select {
	/*\*/ vertical-align: middle; /**/
}

label.top {
	display: block;
	margin-bottom: 6px;
	font-weight: bold;
}
label.left {
	display: inline-block;
	_height: 1em;
	margin-right: 1ex;
	vertical-align: middle;
	font-weight: bold;
}

form {
	margin: 0 0 1em;
	padding: 0;
	font-size: 100%; 
	font-family: inherit;
}

.disabled {
	filter: alpha(opacity=50);
	-moz-opacity: 0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
	zoom: 100%;
	_height: 1em;
}

.required {
	color: #C00;
}

/*-------------------------------------------------------------------
	
	BUTTON
	
----------------------------------------------------------------------*/
.button {
	font-family: inherit;
	font-weight: bold;
	text-align: center;
	background: #fbfbfb url(form/element_bg.png) bottom left repeat-x;
	border: 1px solid;
	border-color: #b3b3b3 #aeaeae #a5a5a5 #ababab;
	padding: .2em 1.6ex;
	*padding: .1em 1.6ex;
	_padding: .1em 2ex;
	_width/**/:1px;
	_white-space: nowrap;
	overflow: visible; /* fix button width for IE 5.5 to 7 */
	cursor: pointer;
	_cursor: hand;
	vertical-align: middle;
	zoom: 100%;
}

.button-mute { font-weight: normal !important; }
.button-action { font-weight: bold !important; }

.button,
.button:hover:visited,
.button:hover,
.button:visited { color: #202020; text-decoration: none; }

.button {	_margin-left: expression(this.previousSibling ? '1ex' : 'null'); }

*+.button {	margin-left: 1ex; }

.button-50,
.button-70,
.button-90,
.button-100,
.button-120,
.button-150,
.button-180 { 
	display: inline-block; 
	top: -1px; 
	position: relative; 
	margin-right: 5px; 
	padding: 0 1.6ex 1px;
}

.button-50 { width: 50px }
.button-70 { width: 70px }
.button-90 { width: 90px }
.button-100 { width: 100px }
.button-120 { width: 120px }
.button-150 { width: 150px }
.button-180 { width: 180px }


input.button {
	padding: .15em 1.6ex 0.1em;
	*padding: 0 1.6ex 0.1em;
	_padding: 2px 2ex 0;
	_height: 23px;
	_line-height: 1.25em;
}

button.button {
	padding: .1em 1.6ex .15em;
	*padding: 0 1.6ex;
	_padding: 1px 2ex 0;
	_height: 23px;
	*line-height: 1.3em;
	_line-height: 1.3em
}

/* \*/
::root input.button { font-size: inherit; }
/* */

a.button {
	white-space: nowrap;
	text-decoration: none;
}

.inputBlock .caption {
	display: block;			/*--- clear: both causing breaking issues in IE6 ---*/
	margin-top: .2em;
}


input,
select,
textarea,
button {
	font-family: inherit;
	font-size: 100%;
	line-height: inherit;
}

.textfield,
textarea,
select[size] {
	padding-top: 2px;
	padding-bottom: 3px;
	background-color: #f7f7f7;
	border-width: thin;
	border-style: solid;
	border-color: #999 #aab3b3 #d5dddd #aab3b3;
}

select {
	line-height: 1.15em;
	background-color: #fefefe;
	border-width: thin;
	border-style: solid;
	border-color: #c4cccc #acb5b5 #6f7777 #acb5b5;
}

select option { 
	padding: 1px;
}

select[size] {
	background-color: #fff !important
}

/*-------------------------------------------------------------------
	
	STATES
	
-------------------------------------------------------------------*/
.textfield:hover,
.textfield:focus,
select[size]:hover,
select[size]:focus,
textarea:hover,
textarea:focus {
	border-color: #459455 #5b5 #6d5 #5b5;
}

select:hover,
select:focus {
	border-color: #6d5 #5b5 #459455 #5b5;
	
}

.textfield:focus,
select:focus,
textarea:focus{
	background-color: #FFF;
	outline: #D6FFC9 solid 1px;
}


::root .button>* {
	position: relative; /* Safari 2 throws outlines around everything inside button. Newer Webkits address this bug. For now, this puts the button text on top of all the outlines. */
}

/* search form */

.search-form {
	background-color: #E0E0E0; 
	position: relative;
	_width: 100%;
}

#content-body .search-form fieldset { width: 90%; margin-bottom: 1em; }

#content-body .pod-body .search-form {
	margin: 0 -8px;
	padding: 8px;
}

.search-form fieldset,
.search-form .textfield {	
	background: #fff;
	outline: none;
	float: left;
	margin: 0;
	padding: 0;
}

.search-form fieldset {	
	border: 1px solid #939393;
	width: 99%;
	height: 30px;
	position: relative;
	z-index: 99;	
}

.search-form .textfield {
	border: none !important;
	height: 100%;
	width: 94%;
	_height: 28px;
	_overflow: hidden;
	font-size: 2em;
	*padding-top: 2px;	
}

.search-form button {
	background: url(form/search.png) top left no-repeat;
	filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=0);
	border: none;
	height: 32px;
	width: 32px;
	font-size: 1px;
	float: right;
	margin-top: -1px;
	margin-right: -1px;
	*margin-left: -1px;
	-webkit-box-shadow: none;
	_margin-bottom: -2px;
}

*:first-child+html #search-for a:active,
*:first-child+html #search-for a:focus {
	zoom: 1;
	position: relative;
}

.pseudo-input:focus,
.pseudo-input:hover,
.pseudo-input:focus,
.pseudo-input:hover,
.search-button:focus,
.search-button:hover {
	border-color: #459455 #5b5 #6d5 #5b5;
	background-color: #FFF;
	outline: #D6FFC9 solid 1px;
}


/*-------------------------------------------------------------------

	ERROR MESSAGES

-------------------------------------------------------------------*/
.error { color: #CC0001; }

.error-block {
	background-color: #ffffcb;
	color: #f00;
	padding: 6px 8px;
	margin-bottom: 1em;
	border: 1px solid #CCC;
	_zoom: 100%;
}

.error-block * {
	_cursor: auto; /* force a re-draw in IE 6 for dynamically assigned css */
}

.error-block a,
.error-block a:visited,
.error-block a:hover { color: #f00; }

.error-block .alert { font-weight: bold; }

.error-block p,
.error-block ul {
	margin-top: 6px;
	margin-bottom: 6px;
	margin: 0;
}

.error-bottom
{
	padding-top: 3px;
	font-size: 0.917em;
}
/*-------------------------------------------------------------------

	PRICE

-------------------------------------------------------------------*/
.price,
.price:link,
.price:visited,
.price:hover,
.price:visited:hover,
.price a,
.price a:link,
.price a:visited,
.price a:hover,
.price a:visited:hover { color: #992222 }

.price {
	/*\*/white-space: nowrap; /**/
	_height: 1em;
	min-height: 1em;
}

a .price { cursor: hand; }

/*\*//*/ span.price, /**/
span[className~=price],
a[className~=price] { display: inline-block; }

.price-lrg {
	font-size: 1.41em;
	font-weight: bold;
}

.feature-price,
.feature-price:link,
.feature-price:visited,
.feature-price:hover,
.feature-price:visited:hover,
.feature-price a,
.feature-price a:link,
.feature-price a:visited,
.feature-price a:hover,
.feature-price a:visited:hover { color: #333 }

/*
	Layout Columns CSS 	
	$Revision: #1 $
*/

/*--- COMMON VALUES ---*/

.columns-5-ABCDE-A,
.columns-5-ABCDE-B,
.columns-5-ABCDE-C,
.columns-5-ABCDE-D,
.columns-5-ABCDE-E,
.columns-4-ABCD-A,
.columns-4-ABCD-B,
.columns-4-ABCD-C,
.columns-3-ABC-A,
.columns-3-ABC-B,
.columns-3-ABcc-A,
.columns-3-ABcc-B,
.columns-3-aaBC-aa,
.columns-3-aaBC-B,
.columns-3-aaBcc-aa,
.columns-3-aaBcc-B,
.columns-2-aaB-aa,
.columns-2-aaBB-aa,
.columns-2-AAbb-AA,
.columns-2-Abb-A,
.columns-2-AB-A,
.columns-2-aaaBB-aaa,
.columns-3-aaaBc-aaa,
.columns-3-aaaBc-B,
.columns-3-aaaBcc-aaa,
.columns-3-aaaBcc-B,
.columns-3-aaBccc-aa,
.columns-3-aaBccc-B
{
	margin-bottom: 0.5em;
	float: left;
}

.columns-4-ABCD-D,
.columns-3-ABC-C,
.columns-3-ABcc-cc,
.columns-3-aaBcc-cc,
.columns-3-aaBC-C,
.columns-2-Abb-bb,
.columns-2-aaBB-BB,
.columns-2-AAbb-bb,
.columns-2-aaB-B,
.columns-2-AB-B,
.columns-2-aaaBB-BB,
.columns-3-aaaBc-c,
.columns-3-aaaBcc-cc,
.columns-3-aaBccc-cc
{
	margin-bottom: 0.5em;
	float: right;
}

/*--- SETS ---*/

/*--- 2-AB ---*/

.columns-2-AB-A,
.columns-2-AB-B { width: 48%; }

.columns-2-Abb-A,
.columns-2-aaB-B { width: 64%; }

.columns-2-Abb-bb,
.columns-2-aaB-aa { width: 32%; }

/*--- 2-aB ---*/
.columns-2-aaaBB-aaa 
{
     width: 13%;
}
.columns-2-aaaBB-BB 
{
     width: 85%;
}

/*--- 3-ABC ---*/

.columns-3-ABC-A,
.columns-3-ABC-B,
.columns-3-ABC-C { width: 30%; }

.columns-3-ABC-B { margin-left: 5%; }

/*--- 3-aaaBc ---*/
.columns-3-aaaBc-aaa
{
	width: 10%;
}
.columns-3-aaaBc-B
{
	width: 63%;
}
.columns-3-aaaBc-c
{
	width: 25%;
}

/* Safari floors percentages instead of rounding, so this helps with balanced columns */

/* \*/
::root .columns-3-ABC-B,
::root .columns-3-aaBC-B,
::root .columns-3-ABcc-B,
::root .columns-3-aaBcc-B,
::root .columns-4-ABCD-B,
::root .columns-4-ABCD-C {
	position: relative;
	left: 1px;
}

/* */

.columns-3-ABcc-A,
.columns-3-ABcc-B,
.columns-3-aaBC-B,
.columns-3-aaBC-C { width: 34%; }

.columns-3-ABcc-cc,
.columns-3-aaBC-aa,
.columns-3-aaBcc-aa,
.columns-3-aaBcc-cc { width: 26%; }

.columns-3-ABcc-B,
.columns-3-aaBC-B,
.columns-3-aaBcc-B { margin-left: 3%; }

.columns-3-aaBcc-B { width: 42%; }

/*--- 4-ABCD ---*/

.columns-4-ABCD-A,
.columns-4-ABCD-B,
.columns-4-ABCD-C,
.columns-4-ABCD-D { width: 22%; }

.columns-4-ABCD-B,
.columns-4-ABCD-C { margin-left: 4%; }


/* 
	Object: Columns
	
	Example:
>	div class="columns"
*/

.columns {
	zoom: 100%;
}

[class~=columns] {
	display: table-row;
}

.columns>[class|=columns] {
	display: table-cell;
	float: none;
	padding-left: 0;
	padding-right: 12px;
	margin: 0; /* override default */
	position: static; /* override default */
	left: 0; /* override default */
}

[class~=columns]>[class|=columns-2-AB],
[class~=columns]>[class*=columns-2-AB] /* help Opera */ {
	width: 50%;
}

[class~=columns]>[class|=columns-3-ABC],
[class~=columns]>[class*=columns-3-ABC] /* help Opera */ {
	width: 33%;
}

[class~=columns]>[class|=columns-4-ABCD],
[class~=columns]>[class*=columns-4-ABCD] /* help Opera */ {
	width: 25%;
}

/*-------------------------------------------------------------------
	
	LIST (Basic)
	$Id: //depot/projects/dylan/releases/rc_16_11_1/ubi/template/identity/adobe/screen/list.css#1 $
	
-------------------------------------------------------------------*/

dt,
dd,
li {
	line-height: 1.25;
}

ol,
li,
li ol,
li ul { font-size: 1em; }

ul {
	list-style-type: disc;
	margin-left: 1ex;
}

ul,
ol {
	padding-left: 2.5ex;
	margin-top: 1em;
	margin-bottom: 1.35em;
}

li {
	line-height: 1.25em;
	padding-bottom: 0.5em;
}

ol {
	list-style-type: decimal;
	overflow: visible;
	margin-left: 3ex;
	_padding-left: 6ex; /*--- IE sub 7 ---*/
}

ol ol {
	list-style-type: lower-alpha;
	margin-left: .5ex;
	_margin-left: 1.5ex; /*--- IE sub 7 ---*/
}

ol ol ol { list-style-type: lower-roman; }

li ol,
li ul {
	margin-top: 0;
	margin-bottom: .3ex;
}

li p { margin-bottom: 0.5em; }

dt,
dd { line-height: 1.5em; }

dt {
	font-weight: bold;
	margin-bottom: 1em;
	margin-top: 0.5em;
}

dl,
dd { margin-bottom: 1.5em; }

dd { margin-left: 16px; }

.pullout-left dd { _margin-left: 0px; }

/*-------------------------------------------------------------------
	
	LIST (Specific to scroll-list)
	
-------------------------------------------------------------------*/
.scroll-list {
height: 11em;
overflow-y: scroll;
border: 1px solid #999;
padding-left: 4px;
background: #FAFAFA;
}
/*-------------------------------------------------------------------	
	
	LIST (LINKS)
	$Id: //depot/projects/dylan/releases/rc_16_11_1/ubi/template/identity/adobe/screen/list.links.css#1 $
	
-------------------------------------------------------------------*/

.link-list {
	text-align: left;
	list-style: none;
	margin: 0 0 1em;
	padding: 0;
}

.link-list>* {
	margin: 1px 1.5ex 1px 0;
	line-height: 1.333em;
}

.link-list>li,
.link-list>dt { padding: 2px 0; }

.link-list>dd { padding-left: 1.25ex; }

.link-list li,
.link-list dt { _padding: 0.15em 0 0.2em; /*--- IE sub 7 ---*/ }

.link-list dd { _padding-left: 1.25ex; /*--- IE sub 7 ---*/ }

.link-list li,
.link-list dt,
.link-list dd {
	_margin: 1px 1.5ex 1px 0;
	_line-height: 1.35em; /*--- IE sub 7 ---*/
}

.button-list > li { margin: 4px 1.5ex 4px 0; padding-top: 0px; line-height: 1.5em; font-size:1.083em }

/*-------------------------------------------------------------------
	
	TAG LIST
	
-------------------------------------------------------------------*/
.tags li { margin-right: 10px; }

.tag { margin-bottom: 0.5em; }
/*-------------------------------------------------------------------
	
	LIST (Markerless)
	$Id: //depot/projects/dylan/releases/rc_16_11_1/ubi/template/identity/adobe/screen/list.nomarker.css#1 $
	
-------------------------------------------------------------------*/

.nomarker {
	list-style-image: none;
	list-style-type: none; 
}

/*
	Topic: tag
	Represent an label within a labeling system
*/

.tag-group {
	white-space: nowrap;
}

/*
	Object: .tag-box
	Draws a box around the text label.
*/

.tag-box {
	position: relative; /* IE 6 clips the border sometimes */
	padding: 0 3px;
	background-color: #888;
	color: #FFF;
	margin-left: 1px;
}

/*
	Object: .tag-text
	Handles the appearance of the text label

	Usage:
>	a class="tag-box"
*/

.tag-text {
	font-size: 11px;
	font-weight: bold;
	text-transform: uppercase;
	white-space: nowrap;
}

/*
	Object: .tag-button
	Same as <.tag-box> but for interactive tags.
	
	Notes:
	The color used here is the result of a 'soft light' blend with the base <a> color
	
	Usage:
>	a class="tag-button"
*/

.tag-button,
.tag-button:link,
.tag-button:visited,
.tag-button:visited:hover {
	background-color: #468;
	position: relative; /* IE 6 clips the border sometimes */
	padding: 0 3px;
	text-transform: uppercase;
	color: #FFFFFF;
	cursor: pointer;
}

.tag-button:hover {
	background-color: #69B;
	padding: 0 3px;
	text-transform: uppercase;
	color: #FFFFFF;
	text-decoration: none;
}



/*	
	Discover CSS
	$Id: //depot/projects/dylan/releases/rc_16_11_1/ubi/template/identity/adobe/screen/discover.css#1 $
*/
/*--- Usage
	<div class="pullout-left left-60">
		<p class="pullout-item"><a href="#"><img src="img.jpg"></a></p>
	 	<h3><a href="#"><span class="note">Adobe</span> Creative Suite 3 Master Collection</a></h3>
	  	<ul class="pipe menu">
			<li><a href="/go/buy_mastercollection">Buy</a></li>
			<li><a href="/go/try_mastercollection">Try</a></li>
			<li><a href="/products/creativesuite/mastercollection/">Learn more</a></li>
	  	</ul>
	</div>
 ---*/
 
.discover { _behavior: url("/lib/com.adobe/hover.htc"); }

.discover .pullout-left h3 { 
	text-transform: none !important; 
	border-bottom: none !important; 
	font-size: 116.7% !important; 
	font-weight: normal;
	line-height: 1.13em;
	margin-bottom: 0 !important;
	margin-top: 0;
}
.discover .pullout-left:hover h3 a:hover { text-decoration: none !important; }
.discover .pullout-left.hover h3 a:hover { text-decoration: none !important; }

.discover .pullout-left > * { margin-bottom: 0; }

.discover .pullout-left h3,
.discover .pullout-left ul { _margin-bottom: 0; }

.discover .note { display: block }

.discover .menu { 
	padding-left: 0; 
	/*--- margin-left: 64px !important;  ---*/
	margin-top: 0.35em;
	visibility: hidden;
}

.discover .menu li:first-child { padding-left: 0; }

.discover .pullout-left {
	margin-left: -6px;
	margin-bottom: 0.35em;
	padding: 6px;
	_padding-right: 2px;
	_zoom: 1;
	_position: relative;
}

.discover .hover,
.discover .pullout-left:hover {
	background-color: #EEE;
	cursor: pointer;
}

.discover .pullout-left li { padding: 0 5px 0; }

.discover .hover .menu,
.discover .pullout-left:hover .menu { visibility: visible; }

.discover ul {
	 _position: relative; 
	 _left: -5px;
}

.discover .pullout-left .menu a { 
	padding: 0;
	margin: 0;
	font-weight: bold;
}

/* FF only needs underline hack */
body:-moz-last-node .discover .pullout-left:hover ul{ margin-bottom: -1px; }
body:-moz-last-node .discover .pullout-left:hover .menu a  { border-bottom: 1px solid #eee; }
body:-moz-last-node .discover .pullout-left:hover .menu a:hover  { border-bottom: 1px solid #069; }

/*--- Safari 2.0 sees the above FF Hack so have to undo it ---*/
body:last-child:not(:root:root) .discover .pullout-left:hover ul { margin-bottom: 0; }
body:last-child:not(:root:root) .discover .pullout-left:hover .menu a,
body:last-child:not(:root:root) .discover .pullout-left:hover .menu a:hover { border-bottom: none; }

/*--- Safari 3.0 sees the above FF Hack so have to undo it ---*/
body:first-of-type .discover .pullout-left:hover ul { margin-bottom: 0; }
body:first-of-type .discover .pullout-left:hover .menu a,
body:first-of-type .discover .pullout-left:hover .menu a:hover { border-bottom: none; }
/*	POD
	$Id: //depot/projects/dylan/releases/rc_16_11_1/ubi/template/identity/adobe/screen/pod.css#1 $
	@author btapley
*/

.pod {
	border: 1px solid #DDDDDD;
	background-color: #EEEEEE;
	margin-bottom: 1em;
	_zoom: 100%;
	*zoom: 100%;
}

.pod-title {
	margin: 0 0 0;
	padding: 6px 8px;
	font-size: .917em;
	font-weight: bold;
	line-height: normal;
	text-transform: uppercase;
	color: #111111;
	background-color: #DDDDDD;
}

.pod-body .pod-title {
	background-color: transparent;
	padding: 0 0 6px;
	margin-bottom: .5em;
}

.pod-body {
	padding: 10px 8px;
}

html[lang=ja] .pod-title,
html[lang=zh] .pod-title,
html[lang=ko] .pod-title {
	font-size: 100%;
}

.ja .pod-title,
.zh .pod-title,
.ko .pod-title {
	font-size: 100%;
}

.pod .pod-button,
.pod .pod-button:link,
.pod .pod-button:visited {
	background-color: #EEEEEE;
}

.pod .pod-button:hover,
.pod .pod-button:visited:hover {
	background-color: #FFFFFF;
}

/*-------------------------------------------------------------------

	DEPTH PATH
	
-------------------------------------------------------------------*/

#depthpath {
	padding: 16px 0 0 16px;
	margin: 0 0 -24px;
	min-height: 1em;
	position: relative;
	z-index: 1;
}

#depthpath li {
	font-size: .917em;
}

html[lang=zh] #depthpath li {
	font-size: 1em;
}

#depthpath * {
	line-height: 1.3;
}

#depthpath a,
#depthpath a:link,
#depthpath a:visited {
	text-decoration: none;
}

#depthpath,
#depthpath a,
#depthpath a:link,
#depthpath a:visited {
	color: #999;
}

#depthpath a:hover { 
	background-color: #000;
	color: #ddd;
}

.dyn-clipmask {
	visibility: hidden;
	overflow: hidden;
	height: 0;
}