/**
 * Layout for the project cycle diagram
 *
 * ------------------------------------------------------------------------- */

#intro             { margin:0; margin-bottom:-45px; padding:15px 160px 0 15px; width:145px; }
#diagram           { background:url("/CommonImages/cycle.png") no-repeat 312px 0; _background:none; line-height:18px; min-height:665px; _height:665px; padding:60px 0 0 321px; }
#diagram:after     { clear:both; content:'.'; display:block; height:0; visibility:hidden; }

#pointers          { _display:inline; float:left; list-style:none; margin:0 0 0 -321px !important; padding:0 !important; width:321px; }
#pointers li       { background:url('/CommonImages/tab.png') repeat-y top left; -webkit-background-clip:border-box; -moz-background-clip:border-box; background-clip:border-box; border:1px solid #f2f2f2; border-right:none; -webkit-border-top-left-radius: 3px; -webkit-border-bottom-left-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-bottomleft: 3px; border-top-left-radius: 3px; border-bottom-left-radius: 3px; cursor:pointer; margin:0 0 15px; padding:8px 0 0 60px; width:260px; }
#pointers .this    { background-image:url('/CommonImages/tab-this.png'); border-color:#ccc; position:relative; right:-1px; }

#diagram .header   { left:-9999px; position:absolute; }
#diagram .content  { min-height:505px; _height:505px; padding:20px 220px 20px 40px; position:relative; display:none; }
#diagram .this .content { display:block; }

#pointers a,
#pointers span     { display:block; text-decoration:none; }
#pointers a:focus,
#pointers a:active { outline:none; }
#pointers img      { opacity:.2; filter:alpha(opacity=20); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; }
#pointers strong   { display:block; font-size:18px; line-height:1; margin:0; padding:0 0 5px; }
#pointers strong a { color:#7f7f7f; }
#pointers strong span 
                   { color:black; float:left; font-size:54px; margin-left:-60px; margin-top:-6px; opacity:.1; filter:alpha(opacity=10); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"; text-align:center; width:60px; }
#pointers .this a,
#pointers a:hover,
#pointers li:hover strong a  
                   { color:#000; }
#pointers .this strong span         
                   { opacity:.25; filter:alpha(opacity=25); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=25)"; }
#pointers .this .resp        
                   { color:#666; }
#pointers .this img          
                   { opacity:1; filter:alpha(opacity=100); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
.resp              { color:#aaa; font-size:12px; padding:0 0 7px; }

#diagram h3        { font-size:1em; font-weight:normal; letter-spacing:.1em; margin:24px 0 12px; text-transform:uppercase; }
#diagram p         { margin:0 0 18px; }
#diagram ul, 
#diagram ol        { margin:0 0 18px; padding:0; }
.content li        { margin:0 0 18px; }
#diagram dfn       { font-style:normal; font-weight:bold; }

.input             { font-size:12px; position:absolute; right:0; top:0; width:170px; }
.output            { bottom:0; font-size:12px; position:absolute; right:0; width:170px; }
.input a, .output a{ color:#e8e8e8; display:block; font-size:18px; font-weight:bold; margin-left:auto; text-align:center; text-decoration:none; }
.input img, 
.output img        { display:block; margin:10px 0; }
.input span,
.output span       { display:block; padding-left:35px; }
.input a           { width:143px; }
.output a          { width:134px; }