/* 
================================================================================
 .............     ......                                                       
    ....   .....     ....                                                       
    ....    ....     ....                                                       
    ....     ....    ....                                                       
    ....     ....    ....                                                       
    ....     ....    ....                                                       
    ....    ....     ....      ......        ......... .....  .....     ...  .  
    ....   ....      ....    ..   ....     .... ....    ....   ....    ..  ...  
    ..........       ....   ...    ....   ....   ....   ....   ....   ...   ..  
    ....   .....     ....   ....   ....   ....   ....   ....   ....   ....   .  
    ....     ....    ....    ..    ....   ....   ....   ....   ....   ......    
    ....     .....   ....        ......   ....   ....   ....   ....    ......   
    ....     .....   ....      ..  ....   ....   ...    ....   ....      .....  
    ....     .....   ....    ...   ....    .... ...     ....   ....       ..... 
    ....     .....   ....   ....   ....     ......      ....   ....   .    .... 
    ....    .....    ....   ....  .....    .            ....  .....   ..    ... 
    ....   .....     ....   ...... .....  ..            ...........   ...   ..  
 .............     ........  ....   ...   ..........     ..... .....  .  ....   
                                          ............                          
                                            ...........                         
                                           ..        ..                         
                                           ..        ..                         
                                           ...      ..                          
                                             .......                            
================================================================================
P   o   r   t   f   o   l   i   o          s   t   y   l   e   s   h   e   e   t
================================================================================
*/

/* =============================================================================
Main
============================================================================= */

/* Fix PNG transparency at IE */
img, div { behavior: url(ui/css/iepngfix.htc) }

body {
	background-color:#6c6c6c;
	background-image:url(../imgs/stripe-diag-9x1px.gif);
	overflow:hidden; /* so the browser does not display a horizontal scroller */
}

#main {
	height:100%;
	background-image:url(../imgs/gradient.gif);
	background-repeat:no-repeat;
	background-position:top left;
}

#header{ padding: 10px 10px 0 10px; }
#imgTitleWSA{ margin-bottom:18px; }


/* =============================================================================
Scroller
============================================================================= */

#trailScroller {
	height:208px;
	width:1000%; /* so the scroller items does not word-wrap */
	overflow:hidden;
	position:relative;
	top:50%;
	margin-top:-262px;
}

div.scrollerShadow {
	width:208px; /* Scroller Class asks to this property be declared inline */
	height:208px;
	background-image:url(../imgs/shadow200px.png);
	background-repeat:no-repeat;
	background-position:left bottom;
	float:left;
}

div.scrollerItem {
	width:200px;
	height:200px;
	background-color:#494949;
	background-repeat:no-repeat;
	background-position:top left;
	overflow:hidden;
}

div.scrollerItemStriped {
	background-image:url(../imgs/stripe-diag-200px.gif);
}

/* =============================================================================
Loading
============================================================================= */

#tagLoading{
	position:absolute;
	top:50%;
	margin-top:-34px;
	left:50%;
	margin-left:-214px;
	z-index:1000;
	width:428px;
	height:68px;
}

.tagLoadingStripes{
	position:absolute;
	z-index:1001;
	top:14px;
	left:14px;
	width:400px;
	height:40px;
	background-image:url(../imgs/stripe-loading.gif);
	background-color:#963a00;
	background-repeat:no-repeat;
	background-position:top left;
}

.tagLoadingText {
	position:absolute;
	height:18px;
	top:50%;
	margin-top:-9px;
	margin-left:5px;
	padding-left:22px;
	text-align:left;
	width:400px;
	color:#ffff6a;
	font-weight:bold;
	overflow:hidden;
	white-space:nowrap;
	background-image:url(../imgs/ani-loading.gif);
	background-repeat:no-repeat;
	background-position:top left;
}

/* =============================================================================
Info Trail
============================================================================= */

#trailBottom {
	bottom:10px;
	position:absolute;
	width:100%;
	right:6px;
}

div.iconInfo {
	float:right;
	margin-right:4px;
}

div.iconInfoContents { 
	padding:5px;
}

div#infoboxAbout {
	text-align:left;
	line-height:24px;
}

div#infoboxLinks {
	text-align:right;
	line-height:13px;
}

/* =============================================================================
Texts
============================================================================= */

.textRed,    a.textRed:link,    a.textRed:visited,    a.textRed:active,    a.textRed:hover    { color:#ff7676; }
.textOrange, a.textOrange:link, a.textOrange:visited, a.textOrange:active, a.textOrange:hover { color:#ffb803; }
.textYellow, a.textYellow:link, a.textYellow:visited, a.textYellow:active, a.textYellow:hover { color:#ff0;    }
.textGreen,  a.textGreen:link,  a.textGreen:visited,  a.textGreen:active,  a.textGreen:hover  { color:#00e66b; }
.textBlue,   a.textBlue:link,   a.textBlue:visited,   a.textBlue:active,   a.textBlue:hover   { color:#9795ff; }

/* =============================================================================
Showcase
============================================================================= */

#showCase1{
	position:absolute;
	z-index:1;
	width:912px;  /* = .showCase2 width  + 70 + 70 */
	height:540px; /* = .showCase2 height + 70 + 70 */
	top:50%;
	left:50%;
	margin-top:-270px;  /* = (#showCase1 height / 2) * -1 */
	margin-left:-456px; /* = (#showCase1 width  / 2) * -1 */
}

#showCaseDim {
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	z-index:2;
	background-color:#555555;
	filter:alpha(opacity=95); /* IE */
	opacity: 0.95; /* others */
	/* -moz-opacity:.75; old Mozilla trick */
}

#showCaseShadows {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	z-index:3;
}

#showCase2{
	position:absolute;
	z-index:4;
	background-image:url(../imgs/stripe-diag-20px-gray.gif);
	width:772px;  /* main width */
	height:400px; /* main height */
	float:left;
	top:70px;
	left:70px;
}

/* =============================================================================
Info
============================================================================= */

#info1{
	position:absolute;
	top:50%;
	right:10px;
	z-index:10;
	width:228px;
	height:228px;
	margin-top:-100px;
}

#info2{
	position:absolute;
	z-index:11;
	top:14px;
	left:14px;
	width:200px;
	height:200px;
	background-image:url(../imgs/stripe-diag-200px.gif);
	background-color:#494949;
	background-repeat:no-repeat;
	background-position:top left;
}

#info3 {
	margin-left:5px;
	margin-top:5px;
	width:190px;
	height:175px;
	overflow:hidden;
	text-align:justify;
	font-size:11px;
	line-height:16px;
}

#info3 * {
	font-size:11px;
	text-align:justify;
}

#info3 br {
	display:block;
	margin-bottom:1em;
}

/* =============================================================================
Navigation elements (numbers represent degrees)
============================================================================= */

.flyoutButton011d25{
	position:absolute;
	right:63px;
	top:-19px;
	z-index:100;
}
.flyoutButton022d50{
	position:absolute;
	right:34px;
	top:-19px;
	z-index:101;
}
.flyoutButton033d75{
	position:absolute;
	right:5px;
	top:-19px;
	z-index:102;
}

.flyoutButton056d25{
	position:absolute;
	right:-19px;
	top:5px;
	z-index:103;
}

.flyoutButton146d25{
	position:absolute;
	right:5px;
	bottom:-19px;
	z-index:104;
}
.flyoutButton157d50{
	position:absolute;
	right:34px;
	bottom:-19px;
	z-index:105;
}
.flyoutButton168d75{
	position:absolute;
	right:63px;
	bottom:-19px;
	z-index:106;
}

/* =============================================================================
Showcase shadows (numbers represent degrees x 10)
============================================================================= */

#showCase1 .shadow70px3150 {
	width:70px;
	height:70px;
	position:absolute;
	top:0;
	left:0;
}

#showCase1 .shadow70px3375 {
	width:70px;
	height:70px;
	position:absolute;
	top:0;
	left:70px;
}

#showCase1 .shadow70px3600 {
	width:632px; /* = #showCase2 width - 70 - 70 */
	height:70px;
	position:absolute;
	top:0;
	left:140px;
}

#showCase1 .shadow70px0225 {
	width:70px;
	height:70px;
	position:absolute;
	top:0;
	right:70px;
}

#showCase1 .shadow70px0450 {
	width:70px;
	height:70px;
	position:absolute;
	top:0;
	right:0;
}

#showCase1 .shadow70px0675 {
	width:70px;
	height:70px;
	position:absolute;
	top:70px;
	right:0;
}

#showCase1 .shadow70px0900 {
	height:260px; /* = #showCase2 height - 70 - 70 */
	width:70px;
	position:absolute;
	top:140px;
	right:0;
}

#showCase1 .shadow70px1125 {
	width:70px;
	height:70px;
	position:absolute;
	bottom:70px;
	right:0;
}

#showCase1 .shadow70px1350 {
	width:70px;
	height:70px;
	position:absolute;
	bottom:0;
	right:0;
}

#showCase1 .shadow70px1575 {
	width:70px;
	height:70px;
	position:absolute;
	bottom:0;
	right:70px;
}

#showCase1 .shadow70px1800 {
	width:632px; /* = #showCase2 width - 70 - 70 */
	height:70px;
	position:absolute;
	bottom:0;
	left:140px;
}

#showCase1 .shadow70px2025 {
	width:70px;
	height:70px;
	position:absolute;
	bottom:0;
	left:70px;
}

#showCase1 .shadow70px2250 {
	width:70px;
	height:70px;
	position:absolute;
	bottom:0;
	left:0;
}

#showCase1 .shadow70px2475 {
	width:70px;
	height:70px;
	position:absolute;
	bottom:70px;
	left:0;
}

#showCase1 .shadow70px2700 {
	height:260px; /* = #showCase2 height - 70 - 70 */
	width:70px;
	position:absolute;
	top:140px;
	left:0;
}

#showCase1 .shadow70px2925 {
	width:70px;
	height:70px;
	position:absolute;
	top:70px;
	left:0;
}