/* Stylesheet for FeONIC - Copyright Parthian Systems 2010. All Rights Reserved */

  /* Setup Links - bc:transparent helps with CSS Validation */
  a:link { color: #3CF; background-color: transparent; text-decoration:none;}
  a:visited { color: #3CF; background-color: transparent; text-decoration:none;}
  a:hover { color: #FFF; background-color: transparent; text-decoration:none;}
  a:active { color: #3CF; background-color: transparent; text-decoration:none;} /* Consider the order of the last two, Last has most importance */
  a img { border:none; }


  .accordion_toggle a {margin: 0 5px 0 5px; }
  .accordion_toggle a:link { color: black; background-color: transparent;}
  .accordion_toggle a:visited { color: black; background-color: transparent;}
  .accordion_toggle a:hover { color: white; background-color: transparent;} /*  bc doesn't work in IE - It seems okay...*/
  .accordion_toggle a:active { color: black; background-color: transparent;}

  .footermenu a {margin: 0 10px 0 10px; }
  .footermenu a:link { color: #949494; background-color: transparent;}
  .footermenu a:visited { color: #949494; background-color: transparent;}
  .footermenu a:hover { color: #3CF; background-color: transparent;} /*  bc doesn't work in IE - It seems okay...*/
  .footermenu a:active { color: #3CF; background-color: transparent;}

  /* Remember to give wrapper of pages a menu* class then CSS navigates down div to a#withID - join of a#ID vital    */
  .menuone .footermenu a#FMenu1,
  .menutwo .footermenu a#FMenu2,
  .menuthree .footermenu a#FMenu3,
  .menufour .footermenu a#FMenu4,
  .menufive .footermenu a#FMenu5,
  .menusix .footermenu a#FMenu6,
  .menuseven .footermenu a#FMenu7,
  .menueight .footermenu a#FMenu8,
  .menunine .footermenu a#FMenu9
   { color: #3CF; background-color: transparent;}

  /*div {border: 1px dotted gray; padding: 0em}*/
  /* Testing Only but only works in FireFox if some simple CSS first!!!! */
  /* Technique to Centre an entire page - copes with browser oddities - from CC Forum*/
  body {/* MSIE 5 doesn't center based on auto left/right margins,
           but 'text-align:center' does center top-level divs: */
        text-align: center;
        font-family: calibri, arial, sans-serif; font-size:13px; /* was 12px */
        line-height: 150%;
           /* Specify a min-width for the body as wide as the 'wrapper'
           element itself. This prevents negative (i.e. inaccessible)
           left-margins in narrow browser windows when using
           Navigator 6+/Mozilla on Win32: */
        min-width: 846px; 
        /* Background only works if some simple CSS before body section !!!!!  */
                /* links are relative to CSS file */
        background-color: black;
        color: white;
        background-attachment: scroll; /* was fixed */
        /* background-repeat: repeat;  probably not required */
        overflow: visible; /* hidden Adds ScrollBars to Wrapper...
        visible on FF3 scrolls to bottom (NO) it scrolls so Anchor is at top e.g. #paInfo
        In FF an Open and Close of Accordion where window is close to size requiring a Scroll bar causes
        the scroll bar to appear momentarily. This causes the screen to jump around. Auto is best for FF and IE  */
        margin: 0px 15px 0px 15px; /*  Cut down the space to squeeze as much in */
       /*         -moz-opacity:.5; filter:alpha(opacity: 50); opacity: .5; */
   }
  .wrapper {/* Reset alignment to compensate for 'text-align:center': */
            text-align: left;
            /* Specify the width of the element. This should be the same as 'body min-width': */
            width: 846px;/* Value is accordion_toggle width plus its padding value  See also ms/pa_infoblock*/
            height: auto; /* 635px; */
            /* Set left and right margins to auto, thus centering the
                element in the containing (body) tag: */
            margin-left: auto;
            margin-right: auto;
            padding: 0px;
        position: relative; /* to enable right block to absolute relative to this not body */
        background-color: #000; /* #A4D480 Block out background image*/
    /* overflow - auto is a disaster on IE7(adds scrollbars)
    But visible on FF3 when browser to short causes scroll to bottom - cannot see top AND NO SCROLLBARS
    hidden in FF3 causes a blank page if the whole page cannot be seen...*/
                        }

/* All have same style but use differently e.g. Accessibility is a h2 as not as important for SEO  */
h1 { font-size: 12px; font-weight:bold; margin: 0px 0px 5px 0px;}
h2 { font-size: 12px; font-weight:bold; margin: 0px 0px 5px 0px;}
h3 { font-size: 12px; font-weight:bold; margin: 0px 0px 5px 0px;}
h4 { font-size: 12px; font-weight:bold; margin: 0px 0px 5px 0px;}
p { margin: 0.5em 0px; }
pre { text-align: justify; }
/* td {border-bottom: 1px dashed white } News Border? */

.header {width:100%; height:90px; }
#feoniclogo {float:left; margin: 8px 0 auto 30px; width:222px;}
.headquote {float: right; width: 65%; color: #3CF; background-color: transparent; font-style:italic; text-align:right; position: absolute; top: 0px; right: 20px;
            margin: 8px 0 0 0;}
.headquote p { margin: 0px;}
.loadingquote {float: right; width: 60%; color: #3CF; font-style:italic; font-size: 2em; line-height: 2em; text-align:right; position: absolute; top: 20px; right: 20px;
           margin: 0 0 0 0; filter:alpha(opacity: 50); opacity: 0.5; }
.quote {float: right; width: 80%; color: #3CF;  margin: 10px 0 0 0; font-style:italic; text-align:right; }
.permission {width: 100%; color: #949494;  text-align:right; font-size:11px;}
.permission p { margin: 0px; }

.sliderquote { color: #3CF; font-style:italic; text-align:left; width: 80%; }
.sliderpermission { color: #949494;} 

#header-register { position: absolute; right: 20px; top: 72px; /* Watch this location - matches header height-textheight */ }

.ms_infoblock {width:826px; height: 500px; margin: 0px; border: 0px; padding: 0px; } /* 0 pixsels less than body/wrapper/accordion  */
.pa_infoblock {width:826px; height: 500px; margin: 0px; border: 0px; padding: 0px; }

/* height = 180 + 12 + 180 - 10 for padding */
/* http://www.positioniseverything.net/explorer/floatIndent.html - double indents IE6 fixed with inline */
.MSDesc {float: left; width: 200px; display:inline; height: 362px; text-align:left; padding: 5px; background: #555 url(../icons/greyblack500.png) repeat-x;
margin: 12px 0px 0px 24px; }
/* NOT REQuired?  .MSDesc h4 {color: #FFF; margin-bottom:5px; text-transform:uppercase;}  /*
.MSImages {float:left; /* FF dislikes a DIV following a left float so make inline BETTER = make it float as well
width: 550px; height: 340px; padding: 0px; margin: 15px 0px 0px 0px;}
.MSImages img {}
*/

.DescList { margin: -4px 0 0 16px; list-style-position: outside; padding-left: 0} /* List on Market sectors page. Clever stuff for IE/FF/Safari alignment   */
.DescList li {  margin: 0px; padding: 0; }

.PADesc {float: left; width: 200px;  display:inline; height: 362px; text-align:left; padding: 5px; background: #555 url(../icons/greyblack500.png) repeat-x;
margin: 12px 0 0 24px; }

.PATechSpec { float: left; width:178px; height: 372px; background: #555 url(../icons/greyblack500.png) repeat-x;
  margin: 12px 12px; }
.PATechSpec img { width:178px; height: 178px; margin-left: auto; margin-right: auto;}
.PATechSpec h4 {padding: 5px; color: #3CF; background-color: transparent; margin: 12px 0 1px 0; }
.PATechSpec p { margin: 0px; padding: 0 5px 0 5px;}
.PATechSpec a { margin: 0px; padding: 0 5px 0 5px;}

.PATechDetail { float: left; width: 372px; height: 362px; padding: 5px; background: #555 url(../icons/greyblack500.png) repeat-x;
margin: 12px 0px; }
.PATechDetail a { padding: 5px; }
.PATechZoom { position:absolute; top:144px; left:436px; } /* WATCH THIS AS IT IS VULNERABLE to Page Dimensions  display:none; has to be inline for show() and hide () */
.PATechZoom .PATZIMG { width:382px; height:372px;}

/* Products Table Data */
.PATDLeft { float:left; text-align:right; display:inline; width: 43%; margin: 0px; padding: 0px; }
.PATDLeft p { white-space:pre; margin: 0px; padding: 0px;}
.PATDRight { float:right; text-align:left; display:block; width: 54%; margin: 0px; padding: 0px;}
.PATDRight p { white-space:pre; margin: 0px; padding: 0px;}
.PATDBottom { bottom: -2em; /* Using Pos:Abs or Pos:Rel to help posn this at bottom causes Problems with Product Anchors etc */
           font-size:10px; line-height:120%; color: #949494; padding: 0px; }


.PAImages {float: left; display:inline; /* FF dislikes a DIV following a left float so make inline */
width: 300px; height: 270px; padding: 5px; margin: 5px 0px 0px 30px;}
.PATechImage {float: left; width: 200px; height: 270px; padding: 5px; margin: 5px auto 0 auto;
            } /* Display Inline helps FF but harder to position using margin??? */

.PATech { width: 380px; font-size:8px; text-align:right; color: white; float: right; margin: 10px 40px 0px 0px;}

/* Effects.appear cannot cope with external styling...
#appear_Dom {display:none; position: absolute; top: 10px; left:120px; width:550px; height:300px; background:#110033; border:1px solid #333; }
#appear_Comm {display:none; position: absolute; top: 10px; left:120px; width:550px; height:300px; background:#110033; border:1px solid #333;
filter:alpha(opacity=90); opacity:0.9; }
*/
.mosaicDull { filter:alpha(opacity=60); opacity:0.6; border:1px solid #666; }
.mosaicBright { filter:alpha(opacity=100); opacity:1.0; border:1px solid #33CCFF;  }

.puzzle { float:left; width:576px; height: 372px; margin:12px 0px 0px 0px;}
.puzzleSingle { float:left; width:576px; height: 100%; margin:12px 0px 0px 12px;} /* Zavvi etc */

/* .puzzle div used for Sprites which are contained in divs - due to nested div cascading it takes precedence over contained .rollover
* so div.rollover used to block .puzzle div  (watch spaces)  */
.puzzle img, .puzzle div { float:left; width:178px; height:178px; margin: 0px 0px 12px 12px;} /* need a small gap between images to ensure onmouseout runds */
.puzzle a img, .puzzle a div { float:left; width:178px; height:178px; cursor: pointer; margin: 0px 0px 12px 12px;} /* need a small gap between images to ensure onmouseout runs */
div.rollover  {position: absolute; text-align:left; width:200px; height: auto; background:#DDD; color: #000; padding: 12px; z-index:100; filter:alpha(opacity=90); opacity:0.9;}
div.rolloverWide {position: absolute; text-align:left; width:300px; height: auto; background:#DDD; color: #000; padding: 12px; z-index:100; filter:alpha(opacity=90); opacity:0.9;}

.footermenu {margin-top: 10px; margin-left:20px; margin-bottom: 12px; font-family:"calibri",sans-serif; font-size:14px;}

.scrollText { float: left; width: 200px; display:inline; height: 362px; text-align:left; padding: 5px; background: url(../icons/greyblack500.png) repeat-x;
            margin: 12px 0px 12px 24px;
            overflow: hidden; /* Ensure scroll boxes don't appear */
            position: relative; /* without this the text keeps going!!! */
            }
.scrollText h2 { padding: 0px; color: white; margin-bottom:2px; }
.scrollImage { float: left; width: 576px; height: 376px; /* height expanded for IE borders */
            text-align:left; margin: 12px 0px 0px 0px;
            overflow: hidden; /* Ensure scroll boxes don't appear */
            position: relative;}

 /* New Home Slider */
 #sliderHome {width:410px; height:360px; overflow: visible; margin: 0px 6px 12px 6px; }
 #sliderHome img { margin-bottom: 20px; }
.sliderHomeimgDull {  border: 1px solid transparent; }

.HomeSliderStatic{ position:absolute; width: 200px; top: 0px; left: 200px; font-size: 13px; font-weight: bold; color: #FFF; margin: 0; padding: 0px; border: 0px; overflow: hidden;}

    
.sliderimgDull { border: 1px solid transparent; }
.sliderimgBright { filter:alpha(opacity=100); opacity:1.0; border: 1px solid #3CF; }

.mediaUp { position: absolute; right: 0px; top: 5px; }
.mediaDown { position: absolute; right: 0px; bottom: 5px; }
.mediaThumb { float:left; margin-bottom: 8px; cursor:pointer; width:178px; }

  .xmlsave-box{
  background: #000;
  border: 1px solid white;
  margin: 5px;
  padding: 5px;
  position: absolute;
  left: 50px;
  top: 60px;
  width: 600px;
  height: 500px;
  visibility: hidden;
  z-index:99;
  overflow:auto;
  }

/* Additional Pages plus Home Page*/
.halfblockText { float: left; width: 392px;  display:inline;  height: 362px; padding: 5px; background: #555 url(../icons/greyblack500.png) repeat-x; 
                margin: 12px 6px 0px 24px;}
.halfblockText #aboutcontacts { position: relative; top: 40px; }
.halfblockImage { float: left; width: 372px; height: 362px; padding: 5px;
                  background: #555 url(../icons/greyblack500.png) repeat-x; margin: 12px 6px;
                  }
.creditsHome { float: right; width: 22%; font-size: 9px; color: #747474; margin: -26px 28px 0px 0px; padding: 0px; border: 0px; overflow: hidden;}

.rolloverImage { width:96px; position: absolute; text-align:left; background:#DDD; color: #000; padding: 12px; z-index:100; filter:alpha(opacity=90); opacity:0.9;}
.rolloverWImage { width:190px; position: absolute; text-align:left; background:#DDD; color: #000; padding: 12px; z-index:100; filter:alpha(opacity=90); opacity:0.9;}
/* replaced with Sprite below .rolloverIMG { height:92px; width:92px; }  - older stuff padding-left: auto; padding-right: auto; OPERA fails this */
.homemini {height:106px; width:106px; margin: 6px; } /* Home page smaller images*/
.homeminiwide { height:106px; width: 226px; margin: 6px; }

/* Pre Django|markdown used white-space to force return (whitespace) .halfblockText #c1 p { white-space:pre; margin: 2px 0px 2px 0px;} */
.halfblockText #c1 { float: left; width: 364px; margin-left: 5px; margin-top: 5px;}
.halfblockText #c1 p { margin: 2px 0px 4px 0px;}
.halfblockText #c2 { float: left; width: 364px; margin-left: 5px; margin-top: 5px;}
.halfblockText #c2 p { margin: 2px 0px 4px 0px;}
.halfblockImage #c3 {float: left; width: 364px; margin-left: 5px; margin-top: 5px;}
.halfblockImage #c3 p { margin: 2px 0px 4px 0px;}
.halfblockImage #c4 {float: left; width: 364px; margin-left: 5px; margin-top: 5px;}
.halfblockImage #c4 p { margin: 2px 0px 4px 0px;}

/* News use MSDesc for LHBText*/
.wideblockText { float: left; width: 560px;  display:inline;  height: 362px; padding: 5px;
                 background: url(../icons/greyblack500.png) repeat-x; margin: 12px 6px 0px 12px;
                 position:relative;}
.wideblockText table { table-layout: fixed; }
.wideblockText table td { padding: 2px 5px; }
.wideblockText table td p { padding: 0px; margin: 0px;}
.wbTextBottom { position: absolute; bottom: 6px; font-size:12px; line-height:120%; color: #949494; padding: 0px; }

/* CSS Sprites */
.flags
{
display: block;
float:left;
width: 19px;
height: 13px;
background-image: url('../icons/flags.gif');
background-repeat: no-repeat;
margin-top: 4px;
margin-right: 8px;
}
.ficon_Japan {background-position: -4px -4px; }
.ficon_Sing {background-position: -4px -24px;}
.ficon_Aus {background-position: -4px -43px;}
.ficon_Hung {background-position: -4px -62px;}
.ficon_Brazil {background-position: -4px -81px;}

.PATDLeftSprite div /*  this div is crucial as not all styles cascade */
{
display: block;
float: left; /* often position: relative is used */
background-image: url('../products/images/products/TechSpecsSprite90.jpg');
background-repeat: no-repeat;
margin-top: 0px;
margin-right: 0px;
}

#TechSpecSpriteF13 { background-position: 0px 0px; width: 370px; height: 289px; }
#TechSpecSpriteF4  { background-position: -370px 0px; width: 355px; height: 289px; }
#TechSpecSpriteD2 { background-position: -725px 0px; width: 371px; height: 304px; }
#TechSpecSpriteSD { background-position: -1096px 0px; width: 362px; height: 186px; }
#TechSpecSpriteF1M { background-position: -1458px 0px; width: 348px; height: 155px; }
#TechSpecSpriteF110 { background-position: -1806px 0px; width: 363px; height: 274px; }
#TechSpecSpriteWW230{ background-position: -2169px 0px; width: 347px; height: 184px; }

.ProductsSprite  /* no div as class and id used directly in tag */
{
display: block;
float: left; /* often position: relative is used */
background-image: url('../products/images/products/ProductsSprite70.jpg');
background-repeat: no-repeat;
padding: 0;
margin: 0;
}

.ProductsSpriteF13  { background-position: 0px 0px; width: 382px; height: 372px; }
.ProductsSpriteD2  { background-position: -382px 0px; width: 382px; height: 372px; }
.ProductsSpriteSD { background-position: -764px 0px; width: 382px; height: 372px; }
.ProductsSpriteF1M { background-position: -1146px 0px; width: 382px; height: 372px; }
.ProductsSpriteWW { background-position: -1528px 0px; width: 382px; height: 372px; }
.ProductsSpriteF4 { background-position: -1910px 0px; width: 382px; height: 372px; }
.ProductsSpriteF110{ background-position: -2292px 0px; width: 382px; height: 372px; }
.ProductsSpriteWW230{ background-position: -2674px 0px; width: 382px; height: 372px; }
.ProductsSpriteF13Access{ background-position: -3056px 0px; width: 382px; height: 372px; }
.ProductsSpriteF4Access{ background-position: -3438px 0px; width: 382px; height: 372px; }

.miniProductsSprite   /* no div as class and id used directly in img tag */
{
display: block;
float: left; /* often position: relative is used */
background-image: url('../products/images/products/miniProductsSprite70.jpg');
background-repeat: no-repeat;
padding: 0;
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
margin-bottom: 10px;
}

.miniProductsSpriteF13  { background-position: 0px 0px; width: 178px; height: 178px; }
.miniProductsSpriteD2  { background-position: -178px 0px; width: 178px; height: 178px; }
.miniProductsSpriteSD{ background-position: -356px 0px; width: 178px; height: 178px; }
.miniProductsSpriteF1M { background-position: -534px 0px; width: 178px; height: 178px; }
.miniProductsSpriteWW { background-position: -712px 0px; width: 178px; height: 178px; }
.miniProductsSpriteF4 { background-position: -890px 0px; width: 178px; height: 178px; }
.miniProductsSpriteF110{ background-position: -1068px 0px; width: 178px; height: 178px; }
.miniProductsSpriteWW230{ background-position: -1246px 0px; width: 178px; height: 178px; }


.rolloverProductsSprite   /* no div as class and id used directly in img tag */
{
display: block;
float: left; /* often position: relative is used */
background-image: url('../products/images/products/rolloverProductsSprite70.jpg');
background-repeat: no-repeat;
padding: 0;
margin-top: 0px;
margin-right: 3px;
margin-left: 0px;
margin-bottom: 0px;
}

.rolloverProductsSpriteF13  { background-position: 0px 0px; width: 92px; height: 92px; }
.rolloverProductsSpriteD2  { background-position: -92px 0px; width: 92px; height: 92px; }
.rolloverProductsSpriteSD{ background-position: -184px 0px; width: 92px; height: 92px; }
.rolloverProductsSpriteF1M { background-position: -276px 0px; width: 92px; height: 92px; }
.rolloverProductsSpriteWW { background-position: -368px 0px; width: 92px; height: 92px; }
.rolloverProductsSpriteF4 { background-position: -460px 0px; width: 92px; height: 92px; }
.rolloverProductsSpriteF110{ background-position: -552px 0px; width: 92px; height: 92px; }
.rolloverProductsSpriteWW230{ background-position: -644px 0px; width: 92px; height: 92px; }


.marineSprite   /* no div as class and id used directly in img tag */
{
display: block;
float: left; /* often position: relative is used */
background-image: url('../market/images/marine/marineSprite70.jpg');
background-repeat: no-repeat;
padding: 0;
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
margin-bottom: 10px;
}
/* not including speedboat as this is used in Home */
.marineSpriteOilRig  { background-position: 0px 0px; width: 178px; height: 178px; }
.marineSpriteCruise  { background-position: -178px 0px; width: 178px; height: 178px; }
.marineSpriteFerry { background-position: -356px 0px; width: 370px; height: 178px; }
.marineSpriteDeck { background-position: -726px 0px; width: 178px; height: 178px; }


.transportSprite   /* no div as class and id used directly in img tag */
{
display: block;
float: left; /* often position: relative is used */
background-image: url('../market/images/transport/transportSprite70.jpg');
background-repeat: no-repeat;
padding: 0;
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
margin-bottom: 10px;
}
/* not including speedboat as this is used in Home */
.transportSpriteBusStop  { background-position: 0px 0px; width: 178px; height: 178px; }
.transportSpriteEscalator { background-position: -178px 0px; width: 178px; height: 178px; }
.transportSpriteStation { background-position: -356px 0px; width: 178px; height: 178px; }


.proAudioSprite   /* no div as class and id used directly in img tag */
{
display: block;
float: left; /* often position: relative is used */
background-image: url('../market/images/proaudio/proaudioSprite70.jpg');
background-repeat: no-repeat;
padding: 0;
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
margin-bottom: 10px;
}

.proAudioSprite1  { background-position: 0px 0px; width: 178px; height: 178px; }
.proAudioSprite2 { background-position: -0px -178px; width: 178px; height: 178px; }
.proAudioSprite3{ background-position:  0px -356px; width: 178px; height: 370px; }
.proAudioSprite4 { background-position: 0px -726px; width: 178px; height: 178px; }
.proAudioSprite5 { background-position: 0px -904px; width: 178px; height: 178px; }
.proAudioSprite6 { background-position: 0px -1082px; width: 178px; height: 178px; }


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