/************************************************
 * Sitecopy CSS 
 * author: Christian Bonham (cbonham)
 * (c) Cisco Systems, All Rights Reserved.
 *
 ************************************************
 * These divs/classes set the main content regions.  
 *
 * 
 * This is the overal sitecopy container, used for
 * establishing context, and overriding body column
 * margins in the docTyp template. 
 *************************************************/
.Sitecopy {
   	font-family: Arial, Verdana, san-serif;
	margin-left: -6px;
	margin-right: -2px;
}   

/**************************************************
 * These overrides tweak the products listing 
 * component template.
 *
 * For categoryHome2
 *************************************************/
.categoryHome2, .categoryHome {
	border-left: 1px #cccccc solid;
	margin-left: -6px;
	margin-top: -14px;
}

.categoryHome2 TD, .categoryHome TD {
	padding-left: 25px;
}

BODY .categoryHome2 .listing .tier2 .heading, 
BODY .categoryHome .listing .tier2 .heading {
	font-size: 12px;
}

BODY .categoryHome2 .listing .tier1 .heading, 
BODY .categoryHome .listing .tier1 .heading {
	font-size: 12px;
}

.categoryHome2 .listing .tier3 A, .categoryHome2 .listing .tier2 A,
.categoryHome .listing .tier3 A, .categoryHome .listing .tier2 A {
	color: #003399;
	font-size: 11px;
}

/**** Also for template overrides.  
 **** This one covers IOS' custom listing. */
.hll .contentTier1Margins {
	border-left: 1px solid #cccccc;
	margin-left: -6px;
	padding-left: 25px;
	padding-bottom: 10px;
}

.hll .contentTier1Margins A {
	font-size: 12px;
}
.hll .contentTier2Margins A {
	font-size: 11px;
}

/*****************************************************
 *  These apply the grey border lines.
 *****************************************************/
.ContentRegionLeftTop {
	border-left: 1px #cccccc solid;
	border-right: 1px #cccccc solid;
	margin: 0 0 2px 0;
	padding: 0 0 10px 0;
}

.ContentRegionLeftBottom {
	border-left: 1px #cccccc solid;
	border-right: 1px #cccccc solid;
	border-top: 1px #cccccc solid;
	margin: 0 0 2px 0;
	padding: 0 0 10px 0;
}

.ContentRegionRightTop {
	/* this fixes the gutters/spacing that 
	 * are built into the 'permanent' spotlight 
	 * graphic. */
	margin: 0 0 2px 0;
	padding: 0 0 10px 0;
}

.ContentRegionRightBottom {
	border-top: 1px #cccccc solid;
	padding: 0 0 10px 0;
}

.ContentRegionBothTop {
	border-left: 1px #cccccc solid;	
	padding: 0 0 10px 0;
}

.ContentRegionBothBottom {
	border-left: 1px #cccccc solid;
	border-top: 1px #cccccc solid;
	padding: 0 0 10px 0;
}

/* The grey content region at the top of the page */
.ContentRegionTopGrey, .ContentRegionTopAlt {
   	margin: 1px 0 2px 0;
   	border-bottom: 1px #cccccc solid;
}

.ContentRegionTop {
	border-left: 1px #cccccc solid;
	border-bottom: 1px #cccccc solid;
	margin: 1px 0 2px 0;
}

.ContentRegionProductsHead, .ContentRegionListingHead {
	border-top: 1px #cccccc solid;
	border-left: 1px #cccccc solid;
}

/***************************************************************
 * All 'content-blocks' take the form of [Item | NoItem].
 *
 * Item = 	1) at the top level of a content region, generates 
 *        	the correct graphical carrot.
 *			2) nested once in an Item, becomes a 'logical' 
 *			sub-item. No identation.  Carrot is removed.  
 *			Headers take on Subheading formatting.
 *			3) nested more than once: become a 'logical' sub-item 
 *			to it's parent Item (which by definition is already 
 *			'logical' sub-item - #2 above - making this a 
 *			sub-item to a sub-item.)  Gains indentation relative 
 *			to parent Item, Headers take on Subheading formatting.
 *
 * NoItem = 1) at the top level of a content region, generates an 
 *			entry equivalent to "Item" but without the graphical 
 *			carrot. Margins are set to justify at the same left 
 *			margin as the carrot in "Item" entries.
 *			2) Not intended to be nested.  Use nested Items 
 *			instead.
 ***************************************************************/
.Sitecopy .Item {
   	padding: 11px 10px 10px 25px;
	background-position: 11px 14px;
	background-repeat:no-repeat;
	background-image:url(http://www.cisco.com/cdc_content_elements/images/products/all/arrow_orange_transparent.gif);
}

.ContentRegionTopGrey .Item, .ContentRegionTopAlt .Item,
.ContentRegionTop .Item {
	padding-top: 13px;
}

.ContentRegionTopGrey .Item, .ContentRegionTopGrey .NoItem,
.ContentRegionTopAlt .Item, .ContentRegionTopAlt .NoItem,
.ContentRegionTop .Item, .ContentRegionTop .NoItem {
	height: 111px;
   	background-position: 11px 16px;
   	background-color: #cccccc;
   	background-image:url(http://www.cisco.com/cdc_content_elements/images/products/all/arrow_red_transparent.gif);
}

.ContentRegionTop .Item, .ContentRegionTop .NoItem {
	background-color: #ffffff;
}

/* An item without carrot, reset margins for no carrot. */
.Sitecopy .NoItem {
   	padding: 10px 10px 10px 11px;
	background-image: none;
}

/* Nested NoItem */
.NoItem .NoItem {
	padding: 10px 10px 5px 15px;
}

/********************************************************
 * Item nested in either an Item, or NoItem. 
 * This is treated as a logical sub-item 
 ********************************************************/
.Item .Item, .NoItem .Item {
	padding: 0 0 0 0;
  	margin: 12px 0 0 0;
  	background-image: none;
  	/*
  	 * Yucky hack! To fix dissappearing borders in IE. 
  	 */
  	border: 1px solid white; 
}

/********************************************************
 * An Item nested further than twice.  This should cover
 * basically unlimited item nesting.  Items nested more
 * than once, are treated as sub-items, to sub-items; 
 * gain additional margin to visual delineate.
 ********************************************************/
.Item .Item .Item {
	margin-left: 16px;
}

.SiteCopy H1 {
   	font-size: 14px;
   	margin: 0 0 6px 0;
   	padding: 0 0 0 0;
   	color: #333333;
   	font-weight: bold;
   	display: block;
   	/* border: 1px solid cyan; */
}

.Item .Item H1, .NoItem .Item H1 {
	margin: 0 0 0 0;
	color: #990000;
	font-size: 11px;
}

/***************************************************************
 * Any link, inside a header, in any Item (or NoItem)
 * is bold, blue, underlined. 
 ***************************************************************/
.Item H1 A, .Item .Item H1 A, .NoItem H1 A, .NoItem .Item H1 A {
	font-size: 11px;
	font-weight: bold;
	color: #003399;
}

/****************************************************************
 * Top Level Item/NoItem SubHeader (<H2>)
 ***************************************************************/
.Item H2, .NoItem H2 {
  	margin: 0 0 0 0;
  	padding: 0 0 0 0;
	font-size: 11px;
	display: block;
	color: #990000;
}

/****************************************************************
 * Nested Item Subhead (<H2>)
 ****************************************************************/
.Item .Item H2, .NoItem .Item H2 {
	color: #333333;
}

.Item H2 A, .NoItem H2 A {
   	color: #003399;
   	font-weight: bold;
}

/*****************************************************************
 * Regular old content.
 *****************************************************************/
.Sitecopy .Description, .Sitecopy P {
   	font-size: 11px;
   	color: #666666;
   	margin: 0 0 0 0;
}

/* Bold when in the grey area. */
.ContentRegionTopGrey .Item P,
.ContentRegionTopAlt .Item P {
  	color: #666666;
  	font-weight: bold;
}

/* Used to fix funky html whitespace issues. */
.Sitecopy .DescriptionLink {
	position: block;
	padding: 0 0 0 0;
}

/* only if it's in a grey box, add the carrot, and adjust padding appropriately. */
.ContentRegionTopGrey .Item .DescriptionLink, 
.ContentRegionTopAlt .Item .DescriptionLink {
	background-image:url(http://www.cisco.com/cdc_content_elements/images/products/all/small_arrow_red_transparent.gif);
	background-position: 0px;
	background-repeat:no-repeat;
	padding: 0 0 0 8px;
}

/****************************************************
 * Links
 ****************************************************/
.Sitecopy A {
   	font-size: 11px;
   	font-weight: normal;
   	text-decoration: underline;
	color: #003399;
}

.ContentRegionTopGrey .Item A,
.ContentRegionTopGrey .NoItem A,
.ContentRegionTopAlt .Item A,
.ContentRegionTopAlt .NoItem A,
.ContentRegionTopGrey .Item .DescriptionLink A, 
.ContentRegionTopGrey .NoItem .DescriptionLink A,
.ContentRegionTopAlt .Item .DescriptionLink A, 
.ContentRegionTopAlt .NoItem .DescriptionLink A {
  	color: #666666;
  	font-weight: normal;
  	font-size: 10px;
}

.Item .DescriptionLink A, .NoItem .DescriptionLink A {
	color: #003399;
	font-weight: normal;
}

/******************************************************
 * Lists
 *****************************************************/
.Item UL, .NoItem UL {
	padding: 0 0 0 0;
	margin: 0 0 6px 0;
	list-style-type: none;
	line-height: 16px;
	font-size: 11px;
}

.Sitecopy LI {
	font-size: 11px;
}

.Sitecopy LI A {
	color: #003399;
	font-size: 11px;
}

.NoItem UL.bulleted {
	list-style-type: disc;
	margin: 6px 0 6px 16px;
	color: #666666;
}

.NoItem .bulleted LI {
	font-size: 11px;
	color: #666666;
}

/******************************************************
 * TABLES
 *****************************************************/
.Item TABLE, .NoItem TABLE {
	padding: 0 0 0 0;
	margin: 0 0 0 -2px; 
} 

.Item TR, .NoItem TR {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}

.Item TD, .NoItem TD {
	margin: 0 0 0 0;
	padding-left: 0px;
	padding-right: 30px;
	vertical-align: top;
}

/*******************************************************
 * Forms
 ******************************************************/
 .Sitecopy FORM {
 	margin: 4px 0 0 0;
 }