@import url("reset.css");

body { font:12px Arial, Helvetica, sans-serif; color:#000; background: url(../imgs/bg/main-bg.gif) repeat top  center}

a { color:#fe0000; text-decoration:none}
a:visited { color:#492c9d; text-decoration:none}
a:hover, a:focus { color:#492c9d; text-decoration:none;}
a:focus {outline: 1px dotted #000;}

h1,h2,h3,h4,h5,h6 { color:#000 }
input, select, textarea, label { font:11px Arial, Helvetica, sans-serif;}

cite {text-align:right; color:#333333; display:block; font-style:normal }
.blockquote {font-style:italic; font-weight:normal; color:#333; font-size: 13px; line-height: 18px}

#wrapper{ width:889px; margin: 0 auto;}


/* Header
----------------------------------------------------------------------------------------------------*/
#header { height:151px; position:relative; background:url(../imgs/bg/header-footer-sprite.png) no-repeat 0 0; margin: 10px 0 0 0 }

#header h1,
#header p.logo,
#header .map,
#header .dsa,
#header #main-nav { position:absolute }

#header h1,
#header p.logo { background:url(../imgs/bg/e-nable-logo.jpg) no-repeat; height:63px; width:196px; text-indent:-9999px; top:39px; left:23px}
#header .map { top:30px; left:592px }
#header .dsa { top:37px; left:788px }

#header #main-nav { width:874px;  top:118px; left:7px}
#header #main-nav li { float:left}

#header #main-nav li a { float:left; display:block; line-height:29px; height:29px; text-align:center; color:#fff; background:url(../imgs/bg/main-nav-sprite.png) no-repeat;}
#header #main-nav li.n-1 a { width:64px; background-position: 0 0}
#header #main-nav li.n-2 a { width:69px; background-position: -64px 0}
#header #main-nav li.n-3 a { width:114px; background-position: -133px 0}
#header #main-nav li.n-4 a { width:151px; background-position: -247px 0}
#header #main-nav li.n-5 a { width:151px; background-position: -398px 0}
#header #main-nav li.n-6 a { width:99px; background-position: -549px 0}
#header #main-nav li.n-7 a { width:81px; background-position: -648px 0}
#header #main-nav li.n-8 a { width:66px; background-position: -729px 0}
#header #main-nav li.n-9 a { width:79px; background-position: -795px 0}

#header #main-nav li.n-1 a:hover, #header #main-nav li.n-1 a:focus, #header #main-nav li.n-1 a.current { background-position: 0 -29px}
#header #main-nav li.n-2 a:hover, #header #main-nav li.n-2 a:focus, #header #main-nav li.n-2 a.current  { background-position: -64px -29px}
#header #main-nav li.n-3 a:hover, #header #main-nav li.n-3 a:focus, #header #main-nav li.n-3 a.current  { background-position: -133px -29px}
#header #main-nav li.n-4 a:hover, #header #main-nav li.n-4 a:focus, #header #main-nav li.n-4 a.current  { background-position: -247px -29px}
#header #main-nav li.n-5 a:hover, #header #main-nav li.n-5 a:focus, #header #main-nav li.n-5 a.current  { background-position: -398px -29px}
#header #main-nav li.n-6 a:hover, #header #main-nav li.n-6 a:focus, #header #main-nav li.n-6 a.current  { background-position: -549px -29px}
#header #main-nav li.n-7 a:hover, #header #main-nav li.n-7 a:focus, #header #main-nav li.n-7 a.current  { background-position: -648px -29px}
#header #main-nav li.n-8 a:hover, #header #main-nav li.n-8 a:focus, #header #main-nav li.n-8 a.current  { background-position: -729px -29px}
#header #main-nav li.n-9 a:hover, #header #main-nav li.n-9 a:focus, #header #main-nav li.n-9 a.current  { background-position: -795px -29px}

/* Footer
----------------------------------------------------------------------------------------------------*/
#footer { background:url(../imgs/bg/header-footer-sprite.png) no-repeat 0 -151px; height:85px; margin-bottom:10px; clear:both}
#footer ul { width:743px; padding: 37px 0 0 22px}
#footer li { float:left; color:#000; font-size:10px; margin-left:7px; padding-left:7px; border-left: solid 1px #bababa}
#footer li:first-child {border:none; margin:0; padding:0; border:none}
#footer li.copyright { float:right; margin:0; padding:0; border:none }
#footer li a { color:#000}

/* Cols
----------------------------------------------------------------------------------------------------*/
.col-1 { float:left; width:298px }
.col-1 .top { background:url(../imgs/bg/col-1-sprite.png) no-repeat 0 0; height:8px;}
.col-1 .bot { background:url(../imgs/bg/col-1-sprite.png) no-repeat 0 -8px; height:11px}
.col-1 .wrap { background:url(../imgs/bg/col-1-repeat.png) repeat-y 0 0; width:100%}
.col-1 .grad { background:url(../imgs/bg/col-1-grad.png) no-repeat bottom left; padding: 6px 20px 20px; width:258px}

.col-2 { float:right; width:591px;}
.col-2 .top { background:url(../imgs/bg/col-2-sprite.png) no-repeat 0 0; height:8px}
.col-2 .bot { background:url(../imgs/bg/col-2-sprite.png) no-repeat 0 -8px; height:11px}
.col-2 .wrap { background:url(../imgs/bg/col-2-repeat.png) repeat-y 0 0; width:100%}
.col-2 .grad { background:url(../imgs/bg/col-2-grad.png) no-repeat bottom left; padding: 6px 20px 20px; width:551px}

.col-2 .left, .col-2 .right {width:255px}
.col-2 .left { float:left; border-right: dashed 1px #bababa; padding-right:20px }
.col-2 .right { float:right; padding-left:20px}

.col-3 { float:left; width:593px;}
.col-3 .top { background:url(../imgs/bg/col-3-sprite.png) no-repeat 0 0; height:8px}
.col-3 .bot { background:url(../imgs/bg/col-3-sprite.png) no-repeat 0 -8px; height:11px}
.col-3 .wrap { background:url(../imgs/bg/col-3-repeat.png) repeat-y 0 0; width:100%}
/* bot & top padding must add to same as col it is twined with, e.g. col-3 padding top & bot equals col-4 padding top 7 bot */
.col-3 .grad { background:url(../imgs/bg/col-3-grad.png) no-repeat bottom left; padding: 20px ; width:553px}

.col-4 { float:right; width:296px }
.col-4 .top { background:url(../imgs/bg/col-4-sprite.png) no-repeat 0 0; height:8px;}
.col-4 .bot { background:url(../imgs/bg/col-4-sprite.png) no-repeat 0 -8px; height:11px}
.col-4 .wrap { background:url(../imgs/bg/col-4-repeat.png) repeat-y 0 0; width:100%}
.col-4 .grad { background:url(../imgs/bg/col-4-grad.png) no-repeat bottom left; padding: 20px; width:256px}

.grad { min-height:400px}

#content p,
#content h2,
#content h3,
#content h4,
#content h5,
#content li {line-height:1.5em }

.dash { padding-bottom:5px; margin-bottom:15px; background:url(../imgs/bg/col-1-dash-div.png) no-repeat bottom left; width:100%}

/* Home
----------------------------------------------------------------------------------------------------*/
#home #masthead { width:920px; height:219px; overflow:hidden; margin-left: 0px}
#home h2 { font-size:16px; padding-bottom:10px; margin-bottom:10px; border-bottom: dashed 1px #bababa; background:url(../imgs/bg/header-arrow.png) no-repeat;}
#latest-news h2 { color:#ff0000; background:none; padding-right:0}
#latest-news h3 { font-size:14px;  }
#latest-news p { margin-bottom:10px; }
#welcome h2.title-1 { background-position: 221px 3px}
#welcome h2.title-2 { background-position: 209px 3px}
#welcome blockquote { padding:30px 0 10px; font-size:18px; clear:both; width:100%}

/* Inside Pages
----------------------------------------------------------------------------------------------------*/
#about h1 { background-position: 101px 7px}
#web-platform h1,
#collaborative-email h1,
#benefits-rewards h1,
#directories h1 { background-position: 161px 7px}
#support h1 { background-position: 210px 7px}
#news h1 { background-position: 168px 7px}
#contact h1 { color:#ff0000; font-size:14px; background:none; border:none; padding:0}
#terms h1 { background-position: 259px 7px}
#privacy h1 { background-position: 220px 7px}
#sitemap h1 { background-position: 112px 7px}

.inside #masthead { width:919px; height:99px; margin-left:-30px}
.inside h1 { font-size:26px; padding-bottom:10px; border-bottom: dashed 1px #bababa; background:url(../imgs/bg/header-arrow.png) no-repeat;}
.inside	 #text h2 { font-size:18px; color:#333333; background:url(../imgs/bg/col-3-dash-div.png) no-repeat bottom left; padding-bottom:5px}
.inside	 #text p,
.inside	 #text h2,
.inside h1 { margin-bottom:15px}

#assets h3 { font-size:14px;   }
#assets h3:first-child{ padding-top:10px}
#assets p { margin-bottom:10px; }

#enqiry-form h3 { font-size:16px; text-transform:uppercase; color:#ff0000; margin-bottom:10px}
#enqiry-form fieldset {}
#enqiry-form legend { font-size:14px; font-weight:bold; padding-bottom:15px}
#enqiry-form .send-to p {float:left; font-size:11px }
#enqiry-form .send-to p span { color:#ff0000; font-size:14px;}
#enqiry-form .send-to input.button { float:right; margin-right:11px }

#world-map { background:url(../imgs/bg/world-map.png) no-repeat; width:536px; height:236px; margin:0 auto 30px; position:relative}
#world-map li a { position:absolute; display:block; height:31px; text-indent:-9999px; background:url(../imgs/bg/office-tab-sprite.png) no-repeat}
#world-map li.usa a { width:116px; background-position: 0 0; top:50px; left:15px}
#world-map li.uk a { width:84px; background-position: -116px 0; top:21px; left:147px}
#world-map li.nl a { width:93px; background-position: -200px 0; top:58px; left:235px}
#world-map li.usa a:hover, #world-map li.usa a:focus, #world-map li.usa a.selected{ background-position: 0 -31px; outline:none }
#world-map li.uk a:hover, #world-map li.uk a:focus, #world-map li.uk a.selected { background-position: -116px -31px; outline:none }
#world-map li.nl a:hover, #world-map li.nl a:focus, #world-map li.nl a.selected { background-position: -200px -31px; outline:none }

#contact .contact-details { clear:both; margin-top: 30px}
#contact .contact-details .reg-ad { float:left; width:180px}
#contact .contact-details .contacts { float:left; padding-left:30px; margin-left:50px }
#contact .contact-details .reg-ad h2 { font-size:16px; color:#ff0000; background:none; padding:0; margin:0;}
#contact .contact-details .contacts h2 { font-size:21px; color:#ff0000; background: url(../imgs/bg/col-1-dash-div.png) no-repeat bottom left; line-height:normal} 
#contact .contact-details .contacts h3 { font-size:14px; color:#ff0000}
#contact .contact-details .contacts p { font-size:14px;}

#news .news-item { background: url(../imgs/bg/col-1-dash-div.png) no-repeat bottom left; margin-bottom:15px;}
#news #text h2 { background:none; padding-bottom:0; margin-bottom:0}
#news #text p.date { font-size:11px; color:#666; margin-bottom:0}
#news #text p.date span { font-weight:bold}
#news #text p.pdf a { background:url(../imgs/icons/pdf.png) no-repeat left center; padding: 2px 0 2px 21px; margin-bottom:0}
#news #text p.link a { background:url(../imgs/icons/link.png) no-repeat left center; padding: 2px 0 2px 21px; margin-bottom:0}
#news #text p.request a { background:url(../imgs/icons/email.png) no-repeat left center; padding: 2px 0 2px 21px;  margin-bottom:0}

fieldset p {width:100%; overflow:hidden; position:relative; padding-bottom:10px; float:left}
fieldset p input, fieldset p select{ width:240px; padding:2px; border: solid 1px #ccc}
fieldset p select { width:246px}
fieldset p textarea { width:240px; padding:2px; border: solid 1px #ccc; height:150px}
fieldset p input:focus, fieldset p select:focus, fieldset p textarea:focus { border: solid 1px #999; background:#f8f8f8}
fieldset p.dropdown label {left:-9999px}
fieldset p label, fieldset label.overlabel-apply  {position:absolute; top:3px; left:4px; z-index:1;}


/* IE6 Browser upgrade
----------------------------------------------------------------------------------------------------*/
#upgrade-browser { font-family:Arial, Helvetica, sans-serif; color:#000; padding:20px; background: #fff url(../imgs/ie6-warning/grad.png) repeat-x bottom left }
#upgrade-browser p { font-size:12px; background:url(../imgs/ie6-warning/warning-icon.png) no-repeat; padding-left:35px; margin:0}
#upgrade-browser a { text-decoration:underline; font-weight:bold; color:#000}
#upgrade-browser a:hover, #upgrade-browser a:focus { text-decoration:none; color:#000}

/* Classes
----------------------------------------------------------------------------------------------------*/
.clear {display:inline-block;}
.clear:after {content:".";display:block;height:0;clear:both;visibility:hidden;}
* html .clear {height:1%;}
.clear {display:block;}
.cboth {clear:both;}
.hide {display:none;}
.strike { text-decoration:line-through}