/* ================================================= 

   =     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.

   

   =================================================

   */



/* =========== 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: inline;

	} 

.t-tn h1 {               

	padding: 2px 0 3px;

	}

.t-tn h2 {                /* thumb headings */

	line-height: 0.9em;

	margin: 0 auto 2px;

	width: 85%;

	}	

.t-tn p {                 /* thumb publication dates */

	font: 9px/1 "arial narrow", arial, verdana;

	margin: 1px 0 0;

	}

* html .t-tn p { 

	margin: 0;

	}

.t-fsi img {

	border: 0;

	margin: 0 0 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(images/marketplace/bluefade_tab_left.gif) no-repeat;

	}

.t-bg2 .t-pc, .t-bg2 .t-ph h1 {

	background: url(images/marketplace/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 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;

	}
	
.trav_view {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-style: normal;
	color: #003366;
	text-decoration: none;
}
.trav_view a:hover {
	text-decoration: underline;
}	



/* ============ 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;

	}

.t-td2b td {

	width: 49%;

	padding: 0 10px;

	}

.t-td3 td {

	width: 32%;

	padding: 0 10px;

	}

.t-td4 td {

	width: 24%;

	padding: 0 7px;

	}



/* ============== 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;

	}