/*------------------------------------------------------------------ */
/* CSS file for Ferrx AS website                                     */
/*                                                                   */
/* WEB colors: http://www.w3schools.com/html/html_colornames.asp     */
/* WARNING: Do NOT start a (class or property) name with a number,   */
/*     It will NOT work!                                             */
/* Starting with a general reset of HTML page parameters             */
/* CSS reset: http://meyerweb.com/eric/tools/css/reset/              */
/*            v2.0 | 20110126 License: none (public domain)          */
/*------------------------------------------------------------------ */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video
 {
 border: 0px dashed lightgray;
 border-spacing: 0px;
 margin: 0px;
 padding: 0px;
 font-size: 100%;
 vertical-align: baseline;
 }

/* HTML5 display-role reset for older browsers */
/* ------------------------------------------- */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none;}
blockquote, q {	quotes: none; }
blockquote:before, blockquote:after, q:before, q:after
 {
 content: '';
 content: none;
}

/* -------------- DEFAULT settting for main site elements -------------- */

a:link{color:cornflowerblue; text-decoration:none;} /* Default link behaviour */
a:visited{color:cornflowerblue;}
a:hover{color:cadetblue; /* background: #E0E0E0;*/}
a:active{color:lightyellow; background:cadetblue;}

body /* Default text behaviour "outside" css-customized tables and cells */
 {
 font-family: Verdana;
 color: black;
 font-size: 0.875em;  /*  16px * 0.875(em) = 14px */
 line-height: 1.5;
 word-spacing: 3px;
 /* background-image: url("./images/somepicture.jpg"); */
 }

 /* --- default TABLE properties --- */
table
 {
 border: 0px solid lightgrey;             /* For debug purposes */
 border-collapse: collapse;
 }

/* --- default table CELL properties --- */
td
 {
 border: 0px dashed cornflowerblue;   /* For debug purposes */
 text-align: left;     /* NOTE1: HTML is left centered by default */
 vertical-align: top;  /* NOTE2: HTML is top adjusted by default */ 
 }
 
/* --- default site paragraph line height --- */
p.ferrx_custom
 {
 line-height: 1.3;
 color:black;
 }
a.ferrx_bookmark
 {
 color:black; text-decoration:none;
 }
 
ul.ferrx_custom
 {
 text-indent: -15px;
 padding-left: 15px;
 list-style-type: circle;
 list-style-position:inside;
 }

/* --- for linked text in dropdown button menu --- */
a.home_logo
 {
 vertical-align: top;
 text-decoration: none;   
 }
a.menu_dropdownbutton_text
 {
 color: cadetblue;
 vertical-align: top;
 background-color: white;
 text-decoration: none;
 text-align: right;
 }
  
/* ----------------------------------------------------------------------- */
/* Main page layout defining tables                                        */
/*                                                                         */
/* NOTE: fixed_header_placeholder width percentage MUST be the same        */
/* as defined in fixed_header_placeholder width                            */
/* ----------------------------------------------------------------------- */

table.browser_window_usage /* Max writable area relative to browser window */
 {
 width: 75%;
 }
td.fixed_header_placeholder
 {
 width: 75%;
 position: fixed;
 top: 0;
 height: 42px;                  /* Allow space before the page title */
 font-size: 1.2em;              /* 1.0em corresponds to 16px */
 text-align: right;
 vertical-align: top;
 background-color: white;
 border-bottom: 0px solid cadetblue;
 z-index: 1;
 }
td.obscured_header_placeholder
 {
 width: 75%;             /* ensuring "whitespace" at top and bottom */
 position: relative;
 height: 42px;            /* of web content obscured by header */
 background-color: white;
 }
 /* NOTE! --------- all 3 above with the same width ----------------------- */

td.default_site_page
 {
 width: 100%; text-align: left;
 }
td.default_textbox_center
 {
 width: 100%; text-align: left;
 border: 1px black solid;
 margin: 2px; padding:2px;
 }
td.ferrx_company_statement
 {
 width: 100%; 
 text-align: center;
 border: 1px gray solid;
 margin: 10px; padding:10px;
 font-size: 1.0em;
 color: black; 
 background-color: white;
 }
td.default_contentpage_leftmargin
 {
 width: 15%; text-align: center;
 }
td.default_contentpage
 {
 width: 70%; text-align: left;
 }
td.default_contentpage_rightmargin
 {
 width: 15%; text-align: center;
 }
td.default_imagetable_imagecolumn
 {
 width: 40%; text-align: center;
 padding: 5px;
 }
td.default_imagetable_textcolumn
 {
 width: 60%; text-align: left;
 padding: 5px;
 }
 div.image_placeholder_autosized
 {
 max-width: 100%;
 padding:5px;
 height: auto;
 text-align: center;
 font-family: Arial;
 font-style: italic;
 line-height: 1.1;
 word-spacing: 2px
 }

 /* ------------------------------------------- */
/*       Headings and header styles            */
/* ------------------------------------------- */
h1.pagetitle
 {
 font-size:1.7em; font-weight:bold;
 color:black; text-align:center;
 }
h1
 {
 font-size:1.5em; font-weight:bold;
 color:black;
 }
h2
 {
 font-size:1.3em; font-weight:bold;
 color:black;
 }
h3
 {
 font-size:1.1em; font-weight:bold;
 color:black;
 }
h4
 {
 font-size:0.9em; font-weight:bold;
 color:black;
 }

/* ------------------------------------------------ */
/*  Custom page content layout from here            */
/* ------------------------------------------------ */
td.center
 {
 text-align:center;
 }
td.center_valign_middle
 {
 text-align:center; vertical-align:middle;
 }
td.right
 {
 text-align:right;
 }
td.white_txt_bgblack
 {
 color:white; background-color:black;
 }

/* ------------------------------------------------ */
/*  Multi column page content layout from here      */
/* ------------------------------------------------ */
td.columns2_left
 {
 width: 50%; padding: 16px; text-align: left;
 }
td.columns2_center
 {
 width: 50%; padding: 16px; text-align:center;
 }
td.columns2_right
 {
 width: 50%; padding: 16px; text-align:right;
 }
td.columns3_left
 {
 width: 33%; padding: 12px; text-align: left;
 }
td.columns3_center
 {
 width: 33%; padding: 12px; text-align: center;
 }
td.columns3_right
 {
 width: 33%; padding: 12px; text-align: right;
 }
td.columns4_left
 {
 width: 25%; padding: 8px; text-align: left;
 }
td.columns4_center
 {
 width: 25%; padding: 8px; text-align:center;
 }
td.columns4_right
 {
 width: 25%; padding: 8px; text-align:right;
 }
td.columns5_center
 {
 width: 20%; padding: 5px; text-align:center;
 }

 /* Custom news page */ 
 /* ---------------- */
td.newspage_image_container
 {
 width:25%;
 }
td.newspage_blog_container
 {
 width:75%;
 }
 td.news_date_col
 {
 width: 25%; padding: 5px; text-align:center;
 }
 td.news_message_col
 {
 width: 75%; padding: 5px; text-align:left;
 }
  
/* ------------------------------------------------------- */
/*  Custom layout for About and Contact page               */
/*  LeftMargin:25% + Content:60% + RightMargin:15% = 100%  */
/* ------------------------------------------------------- */
td.achilles_logo_centered
 {
 width: 20%; padding: 20px; text-align: center;
 }

td.contact_page_left_margin
 {
 width: 25%; padding: 20px; text-align: center;
 }
td.contact_page_content
 {
 width:45%;
 }
td.contact_page_right_margin
 {
 width: 30%; text-align:center;
 }

/* -------------------------------- */
/*   Custom fonts for work log page */
/* -------------------------------- */
 div.site_work_log
 {
 font-family: courier; font-size: 11px;
 text-align: left;
 }

/* ---------------------------------------------------------------------- */
/* FOOTER table, a 100% page width container for COPYRIGHT and statements  */
/* It is locked to the bottom of page, stacked of top of displayed layers */
/* ---------------------------------------------------------------------- */
table.page_footer
{
width:100%;        /* Need full width placeholder for page footer content */
}
 
td.obscured_footer_placeholder
 {
 /* Rendered first, overwritten by the next placeholder */
 /* Ensuring "whitespace" at WEB page bottom to see the */
 /* fixed Imaginova Copyright statement when scrolling  */
 position: relative;
 height: 25px;
 }
 
td.fixed_footer_placeholder  /* footer cell, 75% width of container */
 {
 padding:5px;
 width: 75%;
 position: fixed;
 height: 25px;
 bottom: 0px;
 /* left:0px; */
 z-index: 1;
 font-size: 0.75em;
 text-align: center;
 vertical-align: middle;
 color: black;
 background-color: white;
 border-top: 1px solid cadetblue;
 }