/* ================================================= 
   =     CSS PORTABLE STYLES - by D. Kuehne    =
   ================================================= 
   CSS Portable styles can be used with or 
   without the marketplace page. Just place them on
   a page, include content (dynamic or static) and a 
   style link to all styles below. See the 
   Portable documentation for details on using
   these styles.

   GENERAL COMMENTS
   -------------------------------------------------
   All portable wrappers (whether using basic border 
   styles or graphic backgrounds) are dynamic-- they 
   will resize within their parent. If a column is 
   set to 200 pixels width, the wrapper will expand
   (or be constrained) to this width. If you add
   padding to a column--the width will shrink
   accordingly. The dynamic graphical wrappers use
   a sothisticated "sliding doors" technique using
   only two graphics in the background of four
   elements (3 divs and an h1). Do not edit the
   styles for these except for your own custom
   background images and possible padding changes.
   Changing the basic markup on the page other than 
   content will also "break" the Portable 
   wrappers.
   
   The Portables will also resize vertically.
   Although they can grow very tall, they are not
   really designed to grow over a certain height.
   This is only done for practical reasons. If a 
   Portable needs to be taller, let us know.
   Generally, they will be tall enough for normal
   dynamic content.

   Because Portables are dynamic, both in the 
   horizontal and vertical, you can use them in 
   liquid designs and they will grow and shrink in
   real time. Having said this, the javascript for 
   thumbnails will not spit out thumbnails that will
   resize on the fly. However, normal flowing text 
   and link lists will resize dynamically using 
   Portables in a liquid design.

   You can also contrain the width of a Portable
   by using a width class below (t-w[n]). Just 
   choose or create another width style below, give
   it a pixel width of your choosing and add the
   class to the outer wrapper div. The wrappers are 
   designed to center themselves within a column if 
   their width is less than their parent column
   width. 

   Be aware that if you set the width of a
   Portable wider than its parent, you may break 
   your layout. Also, using wider content than the
   Portable will "break" it-- like a Long url 
   (text without spaces).
   
   BASIC CLASS APPLICATIONS
   -------------------------------------------------
   Every Portable is styled with the "t-p" class
   as its base. Then, depending on the content, you
   add other styles to compliment or alter the base
   styles. For example, if your Portable content 
   contains images, you will add the "t-tn" 
   (thumnail class) to the outer Portable div.
   If you're styling a category Portable, you
   would add a "t-c" after the "t-p" class to style
   the default "nested unordered list" categories.
   Adding "t-cs[n]" (where n is a number) will then
   alter the default category styles adding custom
   bullets or icons, etc.
   
   =================================================
   */

.adInsert p {
    display: none;
}

   
/* =========== BASIC PORTABLE CLASS ============ 
   Use as the base class for all other classes below 
   */

.t-p * {
	margin:0;
	padding:0;
	}
.t-p img {
	border: 0;
	}
.t-p {
	font: 10px verdana;
	margin: 0 auto 6px;
	}
.t-p a,
.t-p a:hover {
	text-decoration: none;
	}
.t-pc {
	height: 100%;
	padding: 0 0 10px
	}
.t-p .t-ph h1,
.t-p .t-pc h2,
.t-p .t-pc h3 {
	font: bold 11px/1 "arial narrow", arial, verdana;
	}
.t-p .t-pc h2,
.t-p .t-pc h3 {
	font-size: 10px !important;
	}
.t-pc h3 a {
	display: block;
	width: 100%;
	text-align: center;
	}
.t-p .t-pc div {
	margin: 0 0 6px;
	}
.t-p ul, .t-p li {
	list-style: none;
	}
.t-p table {
	width: 100%;
	}
						
/* ================== THUMBNAILS =====================

   For thumbnails - ROP, SS, FSI. When displaying the 
   FSI Portable or other tiles that are displayed 
   with images, use the class t-fsi after t-tn to 
   remove the border around these images. You can 
   change the bottom margin if necessary. */
	
.t-tn {
	text-align: center;
	margin: 0 auto 5px;
	}
.t-tn img {
	border: 1px solid #666;
	display: block;
	margin: 0 auto;
	} 
.t-tn h1 {               
	padding: 2px 0 3px;
	}
.t-tn h2 {                /* thumb headings */
	line-height: 0.9em;
	margin: 0 auto 2px;
	width: 85%;
	text-align: center;
	}	
.t-tn p {                 /* thumb publication dates */
	font: 9px/1 "arial narrow", arial, verdana;
	margin: 2px auto 0;
	line-height: 0.9em;
	width: 85%;
	text-align: center;
	}
.t-fsi img {
	border: 0;
	margin: 0 auto 3px;
	}

	
/* ======= PORTABLE WITH HEADING BACKGROUND ========
 
   For use *without* borders or graphic backgrounds.
   You can also add a graphic background if you
   desire. Coming soon-- image replacement styles
   for headings.
   */

.t-h1clr0 h1 {
	background: #999;       /* GREY header background */
	padding: 2px 0 3px;
	margin: 0 0 8px;
	color: #fff;
	text-align: center;
	}
.t-h1clr1 h1 {
	background: #06c;       /* BLUE header background */
	padding: 2px 0 3px;
	margin: 0 0 8px;
	color: #fff;
	text-align: center;
	}
.t-h1clr2 h1 {
	background: #699;       /* BLUE GREEN header background */
	padding: 2px 0 3px;
	margin: 0 0 8px;
	color: #fff;
	text-align: center;	
	}
.t-h1clr3 h1 {
	background: #969;       /* VIOLET header background */
	padding: 2px 0 3px;
	margin: 0 0 8px;
	color: #fff;
	text-align: center;	
	}
.t-h1clr4 h1 {
	background: #f00;       /* RED header background */
	padding: 2px 0 3px;
	margin: 0 0 8px;
	color: #fff;
	text-align: center;	
	}
.t-h1clr5 h1 {
	background: #f90;       /* ORANGE header background */
	padding: 2px 0 3px;
	margin: 0 0 8px;
	color: #000;
	text-align: center;	
	}
.t-h1clr6 h1 {
	background: #ff0;       /* YELLOW header background */
	padding: 2px 0 3px;
	margin: 0 0 8px;
	color: #000;
	text-align: center;	
	}	
			
/* =========== BASIC BORDERED PORTABLE ============

   Portable with border color and heading
   background color. The colors for the border and 
   background do not have to be the same. Edit these
   or add you own custom styles by changing the border
   width or colors accordingly.
   */

.t-clr0 h1 {
	background: #999;       /* GREY header background */
	margin: 0 0 8px;
	padding: 2px 0 3px;
	color: #fff;
	text-align: center;	
	}
.t-clr0 {
	border: 1px solid #06c; /* GREY border */
	}
	
.t-clr1 h1 {
	background: #06c;       /* BLUE header background */
	margin: 0 0 8px;
	padding: 2px 0 3px;
	color: #fff;
	text-align: center;			
	}
.t-clr1 {
	border: 1px solid #06c; /* BLUE border */
	}
	
.t-clr2 h1 {
	background: #699;       /* BLUE GREEN header background */
	margin: 0 0 8px;
	padding: 2px 0 3px;
	color: #fff;
	text-align: center;		
	}
.t-clr2 {
	border: 1px solid #699; /* BLUE GREEN border */
	}
	
.t-clr3 h1 {
	background: #969;       /* VIOLET header background */
	margin: 0 0 8px;
	padding: 2px 0 3px;
	color: #fff;
	text-align: center;		
	}
.t-clr3 {
	border: 1px solid #969; /* VIOLET border */
	}
		
.t-clr4 h1 {
	background: #f00;       /* RED header background */
	margin: 0 0 8px;
	padding: 2px 0 3px;
	color: #fff;
	text-align: center;		
	}
.t-clr4 {
	border: 1px solid #f00; /* RED border */
	}
	
.t-clr5 h1 {
	background: #f90;       /* ORANGE header background */
	margin: 0 0 8px;
	padding: 2px 0 3px;
	color: #000;
	text-align: center;		
	}
.t-clr5 {
	border: 1px solid #f90; /* ORANGE border */
	} 
	
.t-clr6 h1 {
	background: #ff0;       /* YELLOW header background */
	margin: 0 0 8px;
	padding: 2px 0 3px;
	color: #000;
	text-align: center;		
	}
.t-clr6 {
	border: 1px solid #ff0; /* YELLOW border */
	}
	
/* These classes allow you to set a background
   to the basic bordered Portable. You can change
   or add to them if nec. */
	
.t-bgclr0 {
	background: #efefef;    /* light GREY background */
	}
.t-bgclr1 {
	background: #ff9;       /* light YELLOW background */
	}
.t-bgclr2 {
	background: #E1F0FD;    /* light BLUE background */
	}
.t-bgclr3 {
	background: #FEF5E5;    /* light ORANGE background */
	}
						
/* ==== PORTABLE WITH DYNAMIC GRAPHIC BACKGROUND ==== 

   There are two background styles here (t-bg1 & t-bg2). 
   Edit the graphic url to add your own or create other
   sets of styles such as t-bg3, etc. */	

/* Background 1 */	
.t-bg1, .t-bg1 .t-ph {
	background: url(images/marketplace/orangefade_tab_left.gif) no-repeat;
	}
.t-bg1 .t-pc, .t-bg1 .t-ph h1 {
	background: url(images/marketplace/orangefade_tab_right.gif) 100% 0 no-repeat;
	}
.t-bg1 { 
	background-position: 0 100%;
	background-repeat: no-repeat;
	}	
.t-bg1 .t-pc {
	background-position: 100% 100%;
	background-repeat: no-repeat;
	}
.t-bg1 h1 { /* Change padding, color or alignment for different background images */
	padding: 6px 50px 16px 12px;
	text-align: left;
	/*color: #fff; uncomment and change if nec. */
	}
	
/* Background 2 */	
	
.t-bg2, .t-bg2 .t-ph {
	background: url(../graphics/bluefade_tab_left.gif) no-repeat;
	}
.t-bg2 .t-pc, .t-bg2 .t-ph h1 {
	background: url(../graphics/bluefade_tab_right.gif) 100% 0 no-repeat; 
	}
.t-bg2 { 
	background-position: 0 100%;
	background-repeat: no-repeat;
	}	
.t-bg2 .t-pc {
	background-position: 100% 100%;
	background-repeat: no-repeat;	
	}
.t-bg2 h1 { /* Change padding, color or alignment for different background images */
	padding: 6px 50px 16px 12px;
	text-align: left;
	color: #fff; /* reverses heading on darker background - change if needed */
	}	

/* Category background 1 (top) */

.t-bgcat1, .t-bgcat1 .t-ph {                
	background: url(images/marketplace/t_cat_portable_1_left.gif) no-repeat;
	}	
 .t-bgcat1 .t-pc, .t-bgcat1 .t-ph h1  {
	background: url(images/marketplace/t_cat_portable_1_right.gif) 100% 0 no-repeat;	
	}
.t-bgcat1 {
	background-position: 0 100%; 
	background-repeat: no-repeat;
	}
.t-bgcat1 .t-pc {
	background-position: 100% 100%;
	background-repeat: no-repeat;
	padding: 0 20px 6px 15px !important;	
	}
.t-bgcat1 h1 {
	padding: 6px 50px 16px 12px;
	text-align: left;
	color: #fff;
	}	
.t-bgcat1 h3 a {
	color: #fff;
	}

/* Category background 2 */

.t-bgcat2, .t-bgcat2 .t-ph {                
	background: url(images/marketplace/t_cat_portable_2_left.gif) no-repeat;
	}	
 .t-bgcat2 .t-ph h1, .t-bgcat2 .t-pc {
	background: url(images/marketplace/t_cat_portable_2_right.gif) 100% 0 no-repeat;	
	}
.t-bgcat2 {
	background-position: 0 100%; 
	background-repeat: no-repeat;
	}
.t-bgcat2 .t-pc {
	background-position: 100% 100%;
	background-repeat: no-repeat;
	padding: 0 20px 6px 15px !important;	
	}
.t-bgcat2 h1 {
	padding: 6px 50px 16px 12px;
	text-align: left;
	color: #fff;
	}	
.t-bgcat2 h3 a {
	color: #fff;
	}

/* ========== PORTABLE STYLES FOR CATEGORY LISTS =========== 
   
   For nested unordered lists. */

/* === Base categories (default) === */

.t-c ul {
	border-bottom: 1px dashed #bbb !important;
	margin-bottom: 5px;
	padding-bottom: 5px;
	}
.t-c li ul {
	border: 0;
	border-bottom: 0 !important;
	margin: 0;
	padding: 0;
	}
.t-c li ul li {
	display: inline;
	}
.t-c li a {
	font: bold 12px/1 arial, verdana;
	text-decoration: none !important;
	}
.t-c li ul li a {
	padding: 0; /* was padding: 0 5px 0 0; */
	font: normal 10px verdana, arial, sans-serif;
	background: 0;
	text-decoration: none !important;
	}	
.t-c .t-pc {
	padding: 0 20px 10px;	
	}
	
 					
/* == Category style 1 (double arrows) == */

.t-cs1 li ul {
	margin-left: 13px;
	}		
.t-cs1 li a {
	font: bold 11px/1 arial;
	padding-left: 13px;
	background: url(images/marketplace/cat_arrows.gif) 0 4px no-repeat;
	}
.t-cs1 li a:hover {
	background: url(images/marketplace/cat_arrows_red.gif) 0 4px no-repeat;
	}
.t-cs1 li ul li a {
	text-transform: capitalize;
	}
.t-cs1 li ul li a,
.t-cs1 li ul li a:hover {
	background: none !important;
	}

/* ============ PORTABLE LISTS ================ 

   Use this style for unnested lists like the tools
   Portable */

.t-list0 a {
	display: block;
	width: 87%;
	line-height: 1.1;
	background: url(images/marketplace/icon_box_arrow.gif) 0 -46px no-repeat;
	padding: 3px 0 3px 16px;
	text-align: left;
	}	
		
.t-list0 a:hover {
	background: #eee url(images/marketplace/icon_box_arrow.gif) 0 4px no-repeat;
	text-decoration: none;
	}
.t-list0 li {
	border-bottom: 1px dashed #ccc;
	}
.t-list0 .t-pc {
	padding: 0 20px 10px;
	}
		
				
/* ============= LINES BETWEEN THUMBNAILS  ============= 
   
   Solid, dashed or colored lines between thumbnails or 
   images in Portable content. These separate
   content from each other. */

.t-line0 .t-pc div,
.t-line1 .t-pc div,
.t-dash0 .t-pc div, 
.t-dash1 .t-pc div {	
	padding-bottom: 5px;
	margin-bottom: 5px;
	}		
.t-line0 .t-pc div {
	border-bottom: 1px solid #ddd;      /* grey */
	}
.t-line1 .t-pc div {
	border-bottom: 1px solid #D6ECFB;   /* light blue */
	}	
.t-dash0 .t-pc div {
	border-bottom: 1px dashed #aaa;     /* grey */
	}
.t-dash1 .t-pc div {
	border-bottom: 1px dashed #D6ECFB;  /* light blue */
	}
		
/* ========= WIDTH CLASSES FOR PORTABLES ======== 
   
   Explanation for these is above. Create as many
   as you need and add to the outer div. */	

.t-w1 {
	width: 170px;
	}
.t-w2 {
	width: 630px;
	}
.t-w3 {
	width: 200px;
	}
.t-w4 {
	width: 180px;
	}
	
/* ========== PSEUDO HOVER CLASS FOR IMAGES ========== 
   
   Only works in non-ie browsers (Mozilla, etc.). */
	
.t-imghvr img:hover {
	border: 1px solid #f00;
	}

/* ============ DISPLAY NONE FOR ELEMENTS ============ 
   
   Thumbnails display their titles and publication
   dates by default. Adding these classes to the
   outer Portable div will make these not show. */

.t-notnh2 h2, /* no thumbnail title (h2) */
.t-nodate p, /* no thumbnail date */
.t-nomore h3 { /* no "View More" link (h3) */
	display: none;
	}
	
/* ============ TABLE CLASSES FOR COLUMNS ============ 
   
   Table td's are automatically rendered by the 
   javascript inside a dynamic Portable. We've 
   done this so that you could add you own custom
   id or class to the table itself. Here we are just
   targeting all tables within the Portable by 
   adding the class to the outer Portable div.
   If you place more than one table within a 
   Portable do not use any of these classes on the
   outer div. Instead use them on the table itself. */
	
.t-td2 td { /* removed 'table' from before 'td' 12.14.05 */
	width: 49%;
	padding: 0 6px;    vertical-align: top;
	}
.t-td2b td {
	width: 49%;
	padding: 0 10px;    vertical-align: top;
	}
.t-td3 td {
	width: 32%;
	padding: 0 10px;    vertical-align: top;
	}
.t-td4 td {
	width: 24%;
	padding: 0 7px;    vertical-align: top;
	}
.t-td5 td {
	width: 19%;
	padding: 0 7px;
    vertical-align: top;
	}
/* ============== TEXT TRANSFORMATIONS ===============
   
   Text for headings and publication dates, etc. will 
   be defaulted to the original markup or database 
   entry. Add these classes to make some or all 
   headings, dates, etc., either all-caps or 
   first-letter caps. */

.t-ucpt h1,                /* uppercase portable title */
.t-uctnt h2,               /* uppercase thumbnail title */
.t-uctndate p,             /* uppercase thumbnail datel */
.t-ucmore h3,              /* uppercase "view more" link */
.t-uctopc li a,            /* uppercase top categories */ 
.t-ucsubc li ul li a,      /* uppercase sub categories */    
.t-ucall li a,
.t-ucall h1,               /* uppercase all text */
.t-ucall h2,       
.t-ucall p,        
.t-ucall h3 {    
	text-transform: uppercase;
	}	
.t-uctopc li a {
	text-transform: uppercase;
	}
.t-uctopc li ul li a {
	text-transform: none;
	}			
.t-captopc li a {          /* capitalize sub categories */
	text-transform: capitalize;
	}
.t-captopc li ul li a {    /* capitalize sub categories */
	text-transform: none;
	}
.t-capsubc li ul li a {    /* capitalize sub categories */
	text-transform: capitalize;
	}

/* ============== MISC. PORTABLE STYLES ===============
   
   Misc. styles such as margin, etc. */
	
.t-mrgtop {
	margin-top: 8px;
	}
.t-pad20 .t-pc {           /* padding inside of content area if needed */
	padding: 0 20px 10px;
	}
.t-mall .t-pc {            /* Media Mall specific style */
	padding: 0 20px 10px;	
	}	
* html .t-mall iframe {    /* Media Mall specific style */
	margin: -8px auto 10px;	
	}
	
/* ============== TOP JOBS PORTABLE STYLES ===============
   
  Specifically for the TOP Jobs markup */

.t-list2 .t-pc li a {
	display: block;
	_width: 95%;
	line-height: 1.1;
	background: 0;
	padding: 3px 0 3px 0;
	text-align: left;
	}
.t-list2 .t-pc li a:hover {
	background: 0;
	text-decoration: none;
	}
.t-list2 a {
	border-bottom: 1px dashed #ccc;
	}
.t-list2 .t-pc {
	padding: 0 15px 10px;
	}
.t-list2 h3 a {
	border: 0;
	margin-top: 6px;
	}