/****************************************************
== Global Reset 
*****************************************************/

html, body, div, span, h1, h2, h3, h4, h5, h6, p, hr, 
blockquote, a, a img, font, img, dd, dl, dt, li, ol, ul,
fieldset, form, label, legend, table, caption, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	line-height: inherit;
	font-family: inherit;
	text-align: left;
	vertical-align: baseline;
}

ol, ul {
	list-style: none;
}

/*****************************************************
1 == Global Layout Structure
*****************************************************/


body
{
    background: #FCFBF2 url(/images/body-bg.gif) repeat-x fixed left bottom;
    text-align: center;
    color: #5F5F5F;
    font-family: Arial, helvetica, Sans-Serif;
    font-size: 70%;
    height: 100%;
}

#wrap
{
    width: 100%;
    background: transparent url(/images/top-gradient.gif) repeat-x top left;  
}

#container
{
    width: 996px;
    margin: 0 auto;
}

#container #head
{
    float: left;
    margin: 20px 0px 10px 120px;
    display: inline;
}

#container #head p
{
    clear: left;
    font-family: Lucida Sans;
    font-size: 130%;
    margin: 7px 0 0 0;
    color: #191300;
    font-weight: bold;
}

#container .content
{
    float: left;
    width: 996px;
    margin: 0px 0 0 0;
}

#container .content .left-wrap,
#container .content .left-wrap-wide,
#container .content .left-col
{
    float: left;
    width: 490px;
    margin-right: 50px;
}

#container .content .left-wrap-wide,
#container .content .left-col-wide
{
    width: 630px;   
}

#container .content .left-wrap-wide
{
    margin-right: 25px;
}

#container .content .left-wrap .left-col,
#container .content .left-wrap-wide .left-col-wide
{
    background: transparent url(/images/leftcol-bg.gif) repeat-y top right;
    text-align: right;    
    min-height: 340px;
    height: auto !important;
    height: 340px;
    margin: 0;
    float: right;
}

#container .content .left-wrap-wide .left-col-wide
{
    background: transparent url(/images/leftcol-wide-bg.gif) repeat-y top left;
}

#container .content .right-col,
#container .content .right-col-narrow
{
    float: left;
    width: 415px;
}
#container .content .right-col-narrow
{
    width: 300px;
}

#container .content .right-col .holder,
#container .content .right-col-narrow .holder
{
    float: left;
    width: 178px;
}

#container .content .right-col-narrow .holder
{
    width: 140px;
}

#container #foot
{
    float: left;
    width: 996px;
    background: transparent url(/images/footer-line.gif) no-repeat top left;
    margin-top: 40px;
    padding-bottom: 10px;
}

/***************************************************************
== Navigation Styles 
***************************************************************/

#container #head #nav
{
    background: transparent url(/images/nav-dotpix.gif) repeat-x bottom left;
    width: 837px;
    float: left;
    margin-bottom: -7px;
}

#container #head #nav ul,
#container #foot ul
{
    float: right;
    margin: 0 70px 0 0;
    display: inline;
}

#container #foot ul
{
    margin: 5px 100px 0 0;
}

#container #head #nav ul li,
#container #foot ul li
{
    display: inline;
}

#container #head #nav ul li a
{
    float: left;
    text-decoration: none;
    color: #333;
    font-weight: bold;
    min-width: 54px;
    height: 30px;
}

#container #head #nav ul li a:hover,
#container #head #nav ul li a.on
{
    color: #00869A;
    background: url(/images/nav-hover-bg.gif) no-repeat bottom left;
}

#container #head #nav ul li a.home{width: 64px;}
#container #head #nav ul li a.about{width: 67px;}
#container #head #nav ul li a.services{width: 80px;}
#container #head #nav ul li a.projects{width: 78px;}

#container #foot ul li a
{
    color: #333;
    text-decoration: none;
    margin-right: 35px;
    font-size: 95%;
    float: left;
}

#container #foot ul li a:hover
{
    text-decoration: underline;
}

/***** nav styling ends *****/


/***********************************************************
== Home page specifics
***********************************************************/

#container .content #intro,
#container .content .supp-col
{
    float: left;
    background-color: Red;
    width: 384px;
    background: transparent url(/images/intro-bg.gif) repeat-x top;
    margin-right: 40px;
    padding: 18px 16px 0 130px;
}

#container .content .supp-col
{
    width: 180px;
    margin-right: 23px;
    background-image: none;
    padding: 18px 0 0 0;
    color: #3a3a3a;
}

/***********************************************************
== Project List page specifics
***********************************************************/

#container .content .col-wide
{
    margin: 0 0 0 120px;
}

#container .content .col-wide a.cover
{
    float: left;
    width: 157px;
    height: 134px;
    border: 2px #e9e7da solid;
    margin: 0 0 20px 20px;
    text-decoration: none;
    padding: 10px 10px 0 10px;
    position: relative;
    font-size: 140%;
    background-color: #fff !important;
    font-weight:bold;
}


#container .content .col-wide a.cover:hover{
    border: 2px #ccc solid;
}

#container .content .col-wide a.cover b{
    color: #676767;
}

#container .content .col-wide a.cover:hover b{
    color: #7c7964;
}

#container .content .col-wide a.cover span.desc
{
    color: #a0a0a0;
    font-size: 80%;
    font-weight: normal;
}

/***********************************************************
== Project page specifics
***********************************************************/

#container .content .right-col .holder a.campaign
{
    float: left;
    margin: 0 6px 10px 0;
    text-align: center;
    text-decoration: none;
    position: relative;
    width: 83px;
    text-transform: capitalize;
}
#container .content .right-col .holder a.campaign:hover
{
    text-decoration: underline;
}

#container .content .right-col .holder a.campaign img
{
    border: solid 5px #efede1;
    float: left;
}

#container .content .right-col .holder a.campaign:hover img
{
    border: solid 5px #fff;
}

#container .content .left-wrap-wide form.campaign fieldset
{
    float: left;
    margin: 6px 0 0 121px;
    display: inline;
    border: 0; 
}

#container .content .left-wrap-wide form.campaign fieldset select
{
    background-color: #dcdacd;
    border: solid 1px #cccabd;
    width: 190px;
}

/***********************************************************
== Contact page styles
***********************************************************/

#container .content form.contact label
{
    float: left;
    width: 80px;
    margin-top: 7px;
}

#container .content form.contact input,
#container .content form.contact textarea
{
    width: 240px;
    border: 1px #a1a1a1 solid;
    margin-top: 5px;
}

#container .content form.contact input#submit
{
    width: 80px;
}

/***********************************************************
== Text, Links & Images
***********************************************************/

#container .content h1,
#container .content h2,
#container .content h6
{
    color: #2d2d2d;
    border-bottom: solid 1px #ccc;
    margin: 0 0 5px 0;
    padding: 0 0 5px 0;
    font-weight: bold;
    font-family: Lucida Sans;
    font-size: 110%;
}

#container .content .right-col h1,
#container .content .right-col-narrow h1,
#container .content .right-col h6,
#container .content .right-col-narrow h6
{
    margin-bottom: 0px;
}

#container .content h2
{
    color: #5f5f5f;
    font-size: 100%;
}

#container .content .subtitle
{
    float: right;
    background-color: #DCDACD;
    color: #5F5F5F;
    padding: 3px 10px;
    font-weight: bold;
    margin-bottom: 5px;
}
#container .content .newscontent{line-height: 1.6em;}
#container .content p
{
    margin: 10px 0 10px 0;
    line-height: 1.6em;
}

#container .paging{float: left; width: 100%; margin: 10px 0 0 0; padding: 3px 0; border-bottom: 1px #ccc dotted;}
#container .footpaging{border: 0; border-top: 1px #ccc dotted;}
#container .paging .pagelinks{float: right; text-align: right; margin: 0 0 0 15px;}
#container .paging .pagelinks a{background-color: #dcdacd; color: #5f5f5f; text-decoration: none; font-weight: bold; padding: 2px 4px; margin-left: 1px; border: solid 1px #eeecdf; font-size: 90%;}
#container .paging .pagelinks a:hover, #container .paging .pagelinks a.on{background: #96cbd3; color: #fff;}
#container .paging .pagelinks .next, #container .paging .pagelinks .prev{margin: 0;}

#container .content a
{
    color: #747468;
}

#container .content a:hover
{
    color: #4AAFBA;
    text-decoration: none;
}

#container .content .left-col img,
#container .content .left-col-wide img
{
    background-color: #dcdacd;
    padding: 1px;
    border: solid 4px #fff;
    margin: 0 0 5px 5px;
    vertical-align: bottom;
}


#container .content .left-col table img
{
    padding: 0;
    background: 0;
    border: 0;
}

#container .content .left-wrap a.back,
#container .content .left-wrap a.next,
#container .content .col-wide a.back,
#container .content .left-wrap-wide a.back,
#container .content .left-wrap-wide a.next
{
    background-color: #dcdacd;
    height: 18px;
    width: 90px;
    margin: 6px 0 0 0;
    color: #5f5f5f;
    text-decoration: none;
    font-weight: bold;
    padding: 3px 5px 0 5px;
    margin-left: 8px;
    border: solid 1px #eeecdf;
}

#container .content .left-wrap a.next,
#container .content .left-wrap-wide a.next
{
    background-color: #fefcfd;
    text-align: right;
}

#container .content .left-wrap a.back:hover,
#container .content .left-wrap a.next:hover,
#container .content .col-wide a.back:hover,
#container .content .left-wrap-wide a.back:hover,
#container .content .left-wrap-wide a.next:hover
{
    background: #96cbd3;
    color: #fff;
}

#container .content .right-col .holder ul li,
#container .content .right-col-narrow .holder ul li
{
    margin: 0 0 7px 4px;
    background: url(/images/bullet-default.gif) no-repeat left;
    padding-left: 20px;
}

#container .content .right-col .holder ul.dynamic,
#container .content .right-col-narrow .holder ul.dynamic
{
    list-style-image: none;
    margin: 0;
}
#container .content .right-col .holder ul.dynamic li,
#container .content .right-col-narrow .holder ul.dynamic li
{
    margin: 0;
    background-image: none;
    padding: 0;
}

#container .content .right-col .holder ul li a,
#container .content .right-col-narrow .holder ul li a
{
    text-decoration: none;
    width: 127px;
    height: 16px;
    background-color: Red;
    display: block;
    margin: 0 0 3px 0;
    padding: 2px 0 0 20px;
    background: url(/images/bullet.gif) no-repeat left;
}

#container .content .right-col .holder ul li a:hover,
#container .content .right-col-narrow .holder ul li a:hover
{
    background: url(/images/list-hover-bg.gif) no-repeat left;
}

#container #topquote_1,
#container #topquote_2,
#container #topquote_3,
#container #topquote_4,
#container #topquote_5,
#container #topquote_100
{
    width: 350px;
    padding: 65px 0 0 0;
    overflow: hidden;
    background: url(/images/quotes/index.gif) no-repeat;
    clear: both;
    /*IE5 fix*/
    height: 0px !important;
    height /**/:65px;
}

#container #topquote_2{background: url(/images/quotes/about.gif) no-repeat;}
#container #topquote_3{background: url(/images/quotes/services.gif) no-repeat;}
#container #topquote_4{background: url(/images/quotes/projects.gif) no-repeat;}
#container #topquote_5{background: url(/images/quotes/contact.gif) no-repeat;}
#container #topquote_100{background: url(/images/quotes/projects_home.gif) no-repeat;}

sup
{
	font-size: 80%
}


/************************************************************
== Global formatting styles
************************************************************/


/******** colours ********/

.beige{color: #8A8568;}
.turq{color: #5CB2C1;}
.grey{color: #65645B;}
.slategrey{color: #697C6D;}
.floatRight{float: right;}
.floatLeft{float: left;}
.clr{clear: both}
.clrz{clear: both;line-height:1px;height:1px;}


/************************************************************
== pop up image effect
************************************************************/


.lens{
    width: 100%;
    height: 100%;
    z-index: 90;
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    background: #000;
    opacity: 0.5;
    filter: alpha(opacity='50'); 
}

.popHolder{
    width: 100%; 
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 95;
}

.popBox
{
    position: absolute;
    display: block;
    width: 100%;  
    z-index: 100;
}


.popBox div
{
    border: solid 4px #ccc;
    display: block;
    margin: auto;
    margin-top: 100px;
    width:600px;
    height:450px;
    padding: 10px;
    background: #FBFBF3;
    overflow: auto;
}

.popBox div a
{
    float: right;
    color: #5F5F5F;
    background-color: #fff;
    padding: 5px;
    border: solid 1px #ccc;
    text-decoration: none;
}