﻿  /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
      CSS Theme for Ferranti - Mecoms
      
      Default font	Verdana
      Cufon used	
      PNG transp.	
  
      Colors:
      Branding blue:  #1479BE;
      Orange:  #DA8A15;
  
   - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */

body
{
  padding-top: 1em;
  background: url(/_catalogs/masterpage/img/bg_body.gif) #c0c0c0 repeat-x; 
  color: #696969;
  font-family: verdana;
}

#wrapper { position: relative;}
.inner-wrapper {background: url("/_catalogs/masterpage/img/bg_inner-wrapper.png") repeat-y;}
.inner-wrapper-top {background: url("/_catalogs/masterpage/img/bg_inner-wrapper-top.png") no-repeat; height: 5px;}
.inner-wrapper-bottom {background: url("/_catalogs/masterpage/img/bg_inner-wrapper-bottom.png") no-repeat;  height: 5px; margin-bottom: 30px;}

hr {
	height: 1px;
	color: #1479BE;
}

/* -------------------------------------------------------------
 bye bye
------------------------------------------------------------- */

#actions {display: none;}

#access,
.search label,
#footer a#certified span,
ul.list a.read-more span,
a#geography span
{position: absolute; top: auto; left: -9999px; display: block;}

/* -------------------------------------------------------------
 anchors
------------------------------------------------------------- */
a {color: #1479BE;}

a.read-more, input.submit {display: inline-block; cursor: pointer; border: 0; padding: 0.5em 0.9em; background: url("/_catalogs/masterpage/img/bg_button.gif") #1477ba bottom left repeat-x; color: white; font-weight: bold; text-transform: uppercase;  text-shadow: #0a3f63 1px 1px 0; }
a.read-more {font-size: 0.85em; text-decoration: none;}
a.read-more:hover {color: #ffe8c7;}
a.read-more span {padding-left: 13px; background: url("/_catalogs/masterpage/img/bg_readmore-span.gif") 0 0.3em no-repeat; cursor: pointer;}

.news a.read-more {background: url("/_catalogs/masterpage/img/bg_button-news.gif") #d68815 bottom left repeat-x; text-shadow: none;}



a.download {font-weight: bold; color: #696969; text-decoration: none; display: block; padding: 1.5em 0 0.5em 35px;}
a.download:hover {text-decoration: underline;}
a.pdf {background: url("/_catalogs/masterpage/img/icon_pdf.gif") 0 1.5em no-repeat;}

/* -------------------------------------------------------------
 header
------------------------------------------------------------- */

#header {background: url("/_catalogs/masterpage/img/bg_header.gif") #e6e6e6 repeat-x; height: 77px; width: 100%; position: relative;}
#header a{}

#access {}

#actions {}
#actions li{}


a#geography {display: block; width: 69px; height: 39px; overflow: hidden; background: url("/_catalogs/masterpage/img/icon_geography.gif") no-repeat; float: right;}
a#geography:hover, a#geography.active {background-position: 0 -39px;}

/* search ------------------

form.search {overflow: hidden; position: absolute; top: 45px; right: 25px; background: white; -moz-border-radius: 3px; -webkit-border-radius: 3px;}
form.search .form-wrap {width: 150px; height: 21px;}
form.search input {padding: 0.1em 0.3em;}
form.search input.searchInput {width: 85%; border: 0; background: transparent; color: #999; font-size: 0.85em; padding: 0.25em 0.4em;}
form.search input.searchInput:focus {color: #333;}
form.search input.submit {background: url("/_catalogs/masterpage/img/bt_search.gif") no-repeat; border: 0; width: 17px; height: 17px; cursor: pointer;  cursor: pointer; position: absolute; right: 2px; top: 2px;}
form.search input.submit:hover {}
*/
div#SRSB{position:absolute;top:1px;}
div.search-box table, div.search-box table tr td{margin:0;padding:0;border-collapse:collapse;}
div.search-box {width:150px;height:21px;overflow: hidden; position: absolute; top: 45px; right: 25px; background: white; -moz-border-radius: 3px; -webkit-border-radius: 3px;padding:1px 0 0 0;}
div.search-box .form-wrap {width: 150px; height: 21px;}
div.search-box input {padding: 0.1em 0.3em;}
div.search-box input.ms-sbplain{width: 85%; border: 0; background: transparent; color: #999; font-size: 0.85em; padding: 0.25em 0.4em;}
div.search-box input.ms-sbplain:focus {color: #333;}
div.search-box input.submit {background: url("/_catalogs/masterpage/img/bt_search.gif") no-repeat; border: 0; width: 17px; height: 17px; cursor: pointer;  cursor: pointer; position: absolute; right: 2px; top: 2px;}
div.search-box input.submit:hover {}

/* menu ------------------ */

div#menu {width: 540px; float: right; font-family: arial; }
div#menu ul { width: 540px; overflow: hidden; line-height:1; margin:0; padding: 0;}
div#menu ul ul {top:auto; display:none; visibility:hidden;z-index: 250 !important;}
div#menu ul li {float: left; padding: 0 5px; background: url("/_catalogs/masterpage/img/bg_menu-li.gif") right 15px no-repeat;}
div#menu ul li a { display: block; text-decoration: none;  padding: 15px 7px 7px 7px; color: #696969; text-shadow: #fff 1px 1px 0; font-size: 1.2em; text-transform: uppercase; -webkit-border-bottom-left-radius: 10px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius: 0 0 10px 10px;}
div#menu ul li a:hover, div#menu ul li.active a  {color: #fff; text-decoration: none; background: url("/_catalogs/masterpage/img/bg_menu-a.gif") #005d96 repeat-x; text-shadow: #005d96 1px 1px 0;}

/* --- level 2 --- */
#menu ul li ul {display: inline-block; width: auto; position: absolute; z-index: 100; padding-top: 0.15em;}
#menu ul li ul li {float: none; background: white; padding: 0.3em 0.7em; margin: 0;}
#menu ul li ul a, div#menu ul li.active ul a {background: white; color: #696969; font-size: 1.2em; padding: 0.2em 0; text-transform: none; -webkit-border-radius: 0px; -moz-border-radius: 0; }
#menu ul li ul a:hover, div#menu ul li.active ul a:hover {background: white; color: #005d96 !important; }
#menu ul ul {top:auto; display: none; z-index: 250 !important;}
#menu ul li ul ul {left:12em; margin:0px 0 0 10px;}

#menu ul li:hover ul ul,
#menu ul li:hover ul ul ul,
#menu ul li:hover ul ul ul ul {display:none;}

#menu ul li:hover ul,
#menu ul li li:hover ul,
#menu ul li li li:hover ul,
#menu ul li li li li:hover ul {display:block;}

/* -------------------------------------------------------------
 Logo
------------------------------------------------------------- */

#branding {width: 100%;}

h1#logo {overflow: hidden; background: url("/_catalogs/masterpage/img/logo.gif") no-repeat; height: 77px; width: 300px; margin: 0 ; padding: 0; float: left;}
h1#logo a {display: block; padding-top: 9999px;}


/* flash visual ------------------ */

#branding object {margin: 0 !important; padding: 0 !important; z-index: 5;}


/* -------------------------------------------------------------
 Breadcrumbs /* aangepast voor Sharepoint - was UL en LI en is nu DIV en SPAN - nostyle in Sharepoint is belangrijk
------------------------------------------------------------- */
div.breadcrumbs {position: absolute; right: 40px; padding-top: 5px; z-index: 10; }
div.breadcrumbs span {display: inline; font-size: 0.8em; font-weight: bold; color: #1479BE;}
div.breadcrumbs span a {color: #696969; text-decoration: none; font-weight: normal; padding-right: 0px;}
div.breadcrumbs span a:hover {text-decoration: underline; color: #333;}

/* -------------------------------------------------------------
  HOME
------------------------------------------------------------- */


/* -------------------------------------------------------------
  Content
------------------------------------------------------------- */

#container {background: url("/_catalogs/masterpage/img/bg_container-top.gif") white repeat-x;}
.container-wrap {background: url("/_catalogs/masterpage/img/bg_container-bottom.gif") white bottom left repeat-x; position: relative;}
#content {font-size: 0.9em; padding-top: 1.5em;}
.inner-content {padding: 1em; font-size: 0.9em;}
.image {overflow: hidden;}



/* headers ---------------------- */

#content h1 {font-size: 2em; color: #0070B7; font-weight: bold; text-transform: uppercase;}
#content h2 {font-size: 1.2em; color: #0070B7; font-weight: bold;}
#content h3 { font-size: 1.1em; font-weight: bold; }
h3 a {}
h4 {}
h5 {}

#content p { color: #696969;}
p.intro {font-weight: bold; color: #696969;}
p.intro img {display: block; margin-bottom: 1em;}
p.intro img.left {margin: 0 2em 1em 0;}

/* hyperlinks */

#content a {color: #1479BE; text-decoration: none; font-weight: normal;}
#content a:hover {text-decoration: underline;}

/* lists */

#content ul {list-style: circle; }
#content li {line-height: 1.5em;  color: #696969;}

/* pagination ---------------------- */

.pagination {width: 100%}
.pagination ul li {display: inline; padding-right: 0.5em;}
.pagination ul li a {color: #414141; text-decoration: none;}
.pagination ul li a:hover {color:#db0014; text-decoration: none;}
.pagination ul li span.current {font-weight: bold; color:#db0014; }


/* actions ---------------------- */
#content .actions {padding: 1em 0;}



/* gallery ---------------------- */

#content ul.gallery {width: 100%; overflow: hidden; list-style: none; margin: 1em 0; padding: 0;}
#content ul.gallery li {float: left; width: 25%;}
#content ul.gallery li a {display: block;}
#content ul.gallery li a:hover {}
#content ul.gallery li a img {}

/* -------------------------------------------------------------
  Sidebar
------------------------------------------------------------- */
.sidebar {padding-top:2.2em;}

.sidebar .portlet {padding: 0.5em 0;}
.sidebar ul.bullets {padding-left: 1em; list-style: disc; font-size: 0.85em; margin-left: 0.5em;}

.sidebar h4 { font-size: 1.5em; margin-bottom: 0px; }
.sidebar h4, .sidebar h4 a {text-transform: uppercase; font-weight: bold; color: #da8a15;}
  .sidebar .news h4, .sidebar .news h4 a {color: #da8a15;}
  .sidebar .list h4 {color: #0070B7;}

#primary .portlet {padding: 0.5em 0 0.2em 44px;}
#primary h4 {padding-bottom: 0; margin-bottom: 0; font-size: 1.2em;}
#primary h4 a {display: block; color: white; background: url("/_catalogs/masterpage/img/bg_nav-toggle_commodity.gif") #1477ba bottom left repeat-x; padding: 0.35em 0.5em; font-weight: normal; text-transform: uppercase; font-size: 1.1em;}
#primary .market h4 a {background: url("/_catalogs/masterpage/img/bg_nav-toggle_market.gif") #609e49 bottom left repeat-x;}
#primary .business h4 a {background: url("/_catalogs/masterpage/img/bg_nav-toggle_business.gif") #d78815 bottom left repeat-x;}
#primary .role h4 a {background: url("/_catalogs/masterpage/img/bg_nav-toggle_role.gif") #01a3e1 bottom left repeat-x;}
.sidebar h4.toggle a:hover {opacity: 0.9;}

.sidebar ul.navigation {margin-top: 0; background: #f2f2f2; padding: 1em 0.75em;}
.sidebar ul.navigation li {font-size: 0.80em;}
.sidebar ul.navigation li a {color: #696969; text-decoration: none; background: url("/_catalogs/masterpage/img/bullet.gif") 0 0.65em no-repeat; padding-left: 10px; display: block; line-height: 1.5em; padding-bottom: 0.5em;}
.sidebar ul.navigation li a:hover {color: #333;}
.sidebar ul.navigation li.active a {font-weight: bold; color: #1477ba; background: url("/_catalogs/masterpage/img/bullet_active.gif") 0 0.65em no-repeat;}
  .sidebar .market ul.navigation li.active a {color: #609e49; background: url("/_catalogs/masterpage/img/bullet_active-market.gif") 0 0.65em no-repeat;}
  .sidebar .business ul.navigation li.active a {color: #ca7014; background: url("/_catalogs/masterpage/img/bullet_active-business.gif") 0 0.65em no-repeat;}

.sidebar ul.thumblist {font-size: 0.8em;}
.sidebar .role .panewrap {background: #f2f2f2; height: 150px; position:relative;}
.sidebar .role .panewrap-actief {background: #f2f2f2; height: 150px; position:relative;}
.sidebar .role ul#paneRole {background: #f2f2f2; height: 150px; margin: 0; padding: 0;}
.sidebar .role ul.thumblist a {color: #696969; text-decoration: none; display: block; margin-bottom: 2px; background: #E6E6E6; width: 170px; overflow: hidden;  }
.sidebar .role ul.thumblist a:hover span {color: #333; cursor: pointer;}
.sidebar .role ul.thumblist img {float: left; margin: 2px 8px 2px 3px;}
.sidebar .role ul.thumblist span {float: left; display: block; width: 73%; padding-top: 10px; padding-bottom: 5px;}

#secondary .portlet {padding-right: 40px;}

.sidebar ul.list {font-size: 0.8em;}
.sidebar ul.list p {line-height: 1.4em;}
.sidebar ul.list li {padding: 1em;}
.sidebar ul.list li.odd {background: #f2f2f2;}
.sidebar ul.list span.date, #secondary ul.list span.title, #secondary strong  {color: #0070B7; font-weight: bold;}
  .sidebar .news ul.list span.date, #secondary .news ul.list span.title, #secondary .news strong  {color: #da8a15; }
.sidebar ul.list h5 {font-size: 1em; padding-top: 0.2em;}
.sidebar ul.list h5, #secondary ul.list h5 a {text-decoration: none; font-weight: bold; color: #696969; }
.sidebar ul.list h5 a:hover, #secondary ul.list h5 a:hover {text-decoration: underline;}

.sidebar ul.list li ul {padding-left: 15px;  padding-bottom: 0;}
.sidebar ul.list li li {padding: 0.1em 0em 0.2em 0em; list-style: square;}

.sidebar .mecoms_blue H4 {color: #1479BE; }
.sidebar .mecoms_blue H4 a {color: #1479BE; }

.sidebar .mecoms_orange H4 {color: #DA8A15; }
.sidebar .mecoms_orange H4 a {color: #DA8A15; }

.sidebar .mecoms_green H4 {color: #609e49; }
.sidebar .mecoms_green H4 a {color: #609e49; }



.sidebar .partners ul.list a {color: #696969; text-decoration: none; font-weight: bold;}
.sidebar .partners ul.list a:hover strong {text-decoration: underline;}

.sidebar .portlet ul.list a {color: #696969; text-decoration: none; font-weight: bold;}
.sidebar .portlet ul.list a:hover {text-decoration: underline;}

.sidebar .portlet ul.list li ul li a {color: #1479BE; text-decoration: none; font-weight: normal;}
.sidebar .portlet ul.list li ul li a:hover {text-decoration: underline;}



ul.list a.read-more {background: url("/_catalogs/masterpage/img/bg_readmore-arrow.gif") no-repeat; padding: 0; width: 6px; height: 5px; overflow: hidden; display: inline-block;}

/* -------------------------------------------------------------
  Footer
------------------------------------------------------------- */

#footer .wrap {width: 950px; overflow: hidden; background: url("/_catalogs/masterpage/img/bg_footer-doormat.gif") bottom left repeat-x; padding-bottom: 2px;}

#footer a#certified {display: block; float: left; width: 130px; height: 75px; overflow: hidden; background: url("/_catalogs/masterpage/img/logo_certified.gif") no-repeat; margin: 40px 0 0 35px;}

#footer ul.doormat {width: 680px; overflow: hidden; float: right; margin: 0; padding-bottom: 0;}
#footer ul.doormat li {float: left; font-size: 0.9em; background: url("/_catalogs/masterpage/img/bg_footer-doormat-li.gif") top right repeat-y; padding-top: 12px; }

#footer ul.doormat li.quicklinks {width: 140px; height: 150px;}
#footer ul.doormat li.customers {width: 150px; height: 150px;}
#footer ul.doormat li.partners {width: 165px; height: 150px;}
#footer ul.doormat li.contact {width: 180px; background: none; height: 150px;}


#footer ul.doormat h5 {font-size: 0.9em; text-transform: uppercase; font-weight: bold; color: #1479BE; padding-left: 0.5em;}

#footer ul.doormat li li {float: none; width: 100%; line-height: 1.5em; padding: 0.2em 0.5em; background: none;}
#footer ul.doormat form {padding-left: 0.5em;}
#footer ul.doormat form p {padding-bottom: 0.6em;}
#footer ul.doormat form label {display: block; font-size: 0.9em; color: #696969;}
#footer ul.doormat form input.string {width: 100%;}
#footer ul.doormat form input.submit {background: url("/_catalogs/masterpage/img/bg_readmore-arrow.gif") transparent 0 0.5em no-repeat; border: 0; padding-top: 0; padding-left: 8px; color: #696969; text-shadow: #fff 1px 1px 0; text-transform: uppercase; cursor: pointer;}
#footer ul.doormat form input.submit:hover {color: #212121;}

#footer ul.legal {margin-left: 180px; padding-left: 100px; background: url("/_catalogs/masterpage/img/logo_ferranti.gif") 10px 12px no-repeat; padding-top: 10px;}
#footer ul.legal li {display: inline; padding: 0 0.35em; color: #666; font-size: 0.85em; }
#footer a {color: #696969; text-decoration: none;}
#footer a:hover {color: #414141; text-decoration: underline;}

#footer {background: url("/_catalogs/masterpage/img/bg_footer.gif") #dfdfdf repeat-x;}

/*#footer ul.doormat li.contact table td{display:none;}
#footer ul.doormat li.contact table td.ms-WPBorder{display:table-cell;padding-top:0;}

#footer ul.doormat table td.ms-WPBorder{padding-left: 0.5em;}
#footer ul.doormat table td.ms-WPBorder p {padding-bottom: 0.6em;}
#footer ul.doormat table td.ms-WPBorder label {display: block; font-size: 0.9em; color: #696969;}
#footer ul.doormat table td.ms-WPBorder input.string {width: 100%;}
#footer ul.doormat table td.ms-WPBorder input.submit {background: url("/_catalogs/masterpage/img/bg_readmore-arrow.gif") transparent 0 0.5em no-repeat; border: 0; padding-top: 0; padding-left: 8px; color: #696969; text-shadow: #fff 1px 1px 0; text-transform: uppercase; cursor: pointer;}
#footer ul.doormat table td.ms-WPBorder input.submit:hover {color: #212121;}
*/


/* -------------------------------------------------------------
  Forms
------------------------------------------------------------- */

/* FIELDSETS & LISTS
--------------------------------------------------------------------------------------------------*/
#content form fieldset {border: 0; padding: 0;}
#content form fieldset.inputs { }
#content form fieldset.buttons {padding-left: 25%}
#content form fieldset ol {padding: 0; }
#content form fieldset.buttons li { float:left; padding-right:0.5em; }
#content form a.discreet {color: #999;}


/* clearfixing the fieldsets */
#content form fieldset { display: inline-block; }
#content form fieldset:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
html[xmlns] #content form fieldset { display: block; }
* html #content form fieldset { height: 1%; }


/* INPUT LIs
--------------------------------------------------------------------------------------------------*/
#content form fieldset ol li { margin-bottom:1.2em; padding: 0; width: 100%; overflow: hidden; }

/* clearfixing the li's */
#content form fieldset ol li { display: inline-block; }
#content form fieldset ol li:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
html[xmlns] #content form fieldset ol li { display: block; }
* html #content form fieldset ol li { height: 1%; }

#content form fieldset ol li.required { }
#content form fieldset ol li.optional { }
#content form fieldset ol li.error { }
  

/* LABELS
--------------------------------------------------------------------------------------------------*/
#content form fieldset ol li label { display:block; width:25%; float:left; padding-top:.2em; }
#content form fieldset ol li li label { line-height:100%; padding-top:0; }
#content form fieldset ol li li label input { line-height:100%; vertical-align:middle; margin-top:-0.1em;}
#content form label acronym, #content form label abbr {border: 0; padding-left: 0.3em;}


/* NESTED FIELDSETS AND LEGENDS (radio, check boxes and date/time inputs use nested fieldsets)
--------------------------------------------------------------------------------------------------*/
#content form fieldset ol li fieldset { position:relative; }
#content form fieldset ol li fieldset legend { position:absolute; width:25%; padding-top:0.1em; }
#content form fieldset ol li fieldset legend span { position:absolute; }
#content form fieldset ol li fieldset legend.label label { position:absolute; }
#content form fieldset ol li fieldset ol { float:left; width:74%; margin:0; padding:0 0 0 25%; }
#content form fieldset ol li fieldset ol li { padding:0; border:0; }


/* INLINE HINTS
--------------------------------------------------------------------------------------------------*/
#content form fieldset ol li p.inline-hints { color:#666; margin:0.5em 0 0 25%; }


/* INLINE ERRORS
--------------------------------------------------------------------------------------------------*/
#content form fieldset ol li p.inline-errors { color:#cc0000; margin:0.5em 0 0 25%; }
#content form fieldset ol li ul.errors { color:#cc0000; margin:0.5em 0 0 25%; list-style:square; }
#content form fieldset ol li ul.errors li { padding:0; border:none; display:list-item; }


/* STRING & NUMERIC OVERRIDES
--------------------------------------------------------------------------------------------------*/
#content form fieldset ol li.string input { width:73%;  float: right;}
#content form fieldset ol li.password input {width:73%;  float: right; }
#content form fieldset ol li.numeric input { width:73%;  float: right; }


/* TEXTAREA OVERRIDES
--------------------------------------------------------------------------------------------------*/
#content form fieldset ol li.text textarea { width:73%;   float: right;}


/* HIDDEN OVERRIDES
--------------------------------------------------------------------------------------------------*/
#content form fieldset ol li.hidden { display:none; }


/* -------------------------------------------------------------
  Scrollpane.css
------------------------------------------------------------- */

.jScrollPaneContainer {
	position: relative;
	overflow: hidden;
	z-index: 1;
}

.jScrollPaneTrack {
	position: absolute;
	cursor: pointer;
	right: 3px;
	top: 3px;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;        
	height: 95%;
	background: #D3D5C8;
}
.jScrollPaneDrag {
	position: absolute;
	background: #1479BE;
        -moz-border-radius: 3px;
        -webkit-border-radius: 2px;
	cursor: pointer;
	overflow: hidden;
}
.jScrollPaneDragTop {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}
.jScrollPaneDragBottom {
	position: absolute;
	bottom: 0;
	left: 0;
	overflow: hidden;
}
a.jScrollArrowUp {
	display: block;
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	text-indent: -2000px;
	overflow: hidden;
	/*background-color: #666;*/
	height: 9px;
}
a.jScrollArrowUp:hover {
	/*background-color: #f60;*/
}

a.jScrollArrowDown {
	display: block;
	position: absolute;
	z-index: 1;
	bottom: 0;
	right: 0;
	text-indent: -2000px;
	overflow: hidden;
	/*background-color: #666;*/
	height: 9px;
}
a.jScrollArrowDown:hover {
	/*background-color: #f60;*/
}
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {
	/*background-color: #f00;*/
}


/* --- Greyscale hover - logo grid ----- */

#content ul.greyhover {
	width: 456px;
	list-style: none;
	margin: 0; padding: 0;
        overflow: hidden;
}
ul.greyhover li {
	float: left;
	margin: 0px; padding: 0;
	text-align: center;
	display: inline; /*--Gimp Fix aka IE6 Fix - Fixes double margin bug--*/
}
ul.greyhover li a.thumb {
	width: 150px; /*--Width of image--*/
	height: 100px; /*--Height of image--*/
	cursor: pointer;
        display: block;
	overflow: hidden;
}
ul.greyhover li span { /*--Used to crop image--*/
	overflow: hidden;
	display: block;
}

ul.greyhover li a.thumb:hover {
	background: #ccc; /*--Hover effect for browser with js turned off--*/

}



a.nolink, a.nolink cufon {
	cursor: default !important;
}


