Really need help with CSS path

Hi all.. I know this topic has been discussed here many times already, i just
can't find a solution to what I need to do..

I need the CSS style sheet to apply to my pages properly both on the web
server and while i'm designing the site in Dreamweaver..

Here's my folder structure:

\\Local_Network_Srv\Pages\developtment\sys\wwwroot
wwwroot is my Root folder with many different sites as subfolders.. Then I
have my parent folders that will be used for all sites within:

wwwroot/Templates
wwwroot/CSS
wwwroot/images

Now, let's take this site for example:
wwwroot/Financial

I've built a template, within the template I applied a stylesheet like so..
<link href="../CSS/styles.css" rel="stylesheet" type="text/css">

When I create a page using this template and save it to the same Financial
folder, the CSS is all visible when i'm editing the page within DW, but when I
upload it to the web server , none of the CSS is working..

And when I check that new page's code, the CSS link shows up like this...

<link href="/CSS/styles.css" rel="stylesheet" type="text/css">
without the double-dots..

How can I fix this? Unfortunately I can't even show this to you because it's
all on the intranet.. but I would really appreciate any help.

Thanks!

Relative to site or relative to document, please check.

My use: <link href='leftNav.css' rel='stylesheet' type='text/css'>

I don't know what it's relative to, but the code I'm using is listed in my post
above..
first what I'm manually entering into the template, and then the code what the
pages using my template end up with..

My CSS link has no dots or forward slashes!!!!!!!!!!

<link href='leftNav.css' rel='stylesheet' type='text/css'>

Dreamweaver does do strange things.

Check the code