/*  set the page background and fix horizontal centering in ie
    and set the background color to the specified blue */
body
{
    text-align: center;
    background: #00364a;
    margin-bottom: 25px;
}

span 
{
    line-height: 100%;
}

/* intro background set black */
body#intro 
{
    background: #000;
}

/* normalise link sizes and color to white */
a
{
    color: #fff;
    font-size: 100%;
    line-height: 100%;
}

/* defafult style is bold on hover */
a:hover 
{
    font-weight: bold;
}

/* set default paragraph style */
p
{
    line-height: 15px;
    font-size: 85%;
    font-weight: normal;
    color: #fff;
    margin-bottom: 15px;
    
}

/* set anchors underneath paragraphs */
p a
{
    color: #dedede;
    font-weight: bolder;
}

/* in this case text set to white from grey  on hover */
p a:hover 
{
    color: #fff;
}

/* used to hold the heading image for each page, text hidden through indenting*/
h1 
{
    text-indent: -2000px;
    height: 43px;
    width: 350px;
    position: absolute;
    left: 220px;
    top: 60px;
}

/* set the image depending on h1 id */
h1#welcome { background: url(../media/images/headings/welcome.png) no-repeat; }
h1#newbusiness { background: url(../media/images/headings/newbusiness.png) no-repeat; }
h1#exbusiness { background: url(../media/images/headings/exbusiness.png) no-repeat; }
h1#everyone { background: url(../media/images/headings/everyone.png) no-repeat; }
h1#packages { background: url(../media/images/headings/packages.png) no-repeat; }
h1#services { background: url(../media/images/headings/services.png) no-repeat; }
h1#portfolio { background: url(../media/images/headings/portfolio.png) no-repeat; }
h1#contact { background: url(../media/images/headings/contact.png) no-repeat; }
h1#packages-1 { background: url(../media/images/packages/heading-package1.png) no-repeat; }
h1#packages-2 { background: url(../media/images/packages/heading-package2.png) no-repeat; }
h1#packages-3 { background: url(../media/images/packages/heading-package3.png) no-repeat; }
h1#packages-4 { background: url(../media/images/packages/heading-package4.png) no-repeat; }
h1#testimonials { background: url(../media/images/headings/testimonials.png) no-repeat; }
h1#sitemap { background: url(../media/images/headings/sitemap.png) no-repeat; }
h1#terms { background: url(../media/images/headings/terms.png) no-repeat; }
h1#privacy { background: url(../media/images/headings/privacy.png) no-repeat; }
h1#links { background: url(../media/images/headings/links.png) no-repeat; }

/* style the h2 and its various colour choices */
h2 
{
    color: #fff;
    padding: 0px 0px 5px 0px;
    font-weight: bolder;
    font-size: 120%;
}

h2.yellow 
{
    color: #fffcc7;
}
h2.white
{
    color: #fff;
}
h2.blue 
{
    color: #75c4f0;
}

/* for contact page, headings are non-bold */
h2.normalWeight 
{
    font-weight: normal;
}

/* heading in the right hand column */
#rightCol h2 
{
    padding: 0px 10px;
    line-height: 14px;
}

/* second level heading in rhs */
h3 
{
    font-weight: bolder;
    color: #fffcc7;
    font-size: 95%;
}

/* style strong elements */
strong 
{
    font-size: 100%;
    line-height: 100%;
    font-weight: bold;
}

/* definition list styling for testimonials  at top of page */
dl 
{
    text-align: right;
    padding-top: 14px;
}


dt 
{
    font-size: 75%;
    color: #75c4f0;
}

dd 
{
    font-size: 75%;
    font-weight: bolder;
    line-height: 13px;
    color: #fffcc7;
}

/* definition list styling for the testimonial page itself */
dl#testimonialPage 
{
    margin-right: 14px;
    padding-top: 0px;
    text-align: left;
}

#testimonialPage dt  
{
    font-size: 85%;
    padding-bottom: 5px;
    margin-top: 0px;
}

#testimonialPage dd 
{
    color: #fff;
    font-size: 85%;
    line-height: 14px;
}

/* small ordered list for privacy policy page */
ol#small
{
    margin-left: 5px;
    font-weight: bolder;
    color: #fff;
    list-style-position: inside;
    font-size: 75%;
    line-height: 13px;
}

ol li 
{
    padding-bottom: 4px;
}

/* style "More Testimonials" hyperlink */
a#testimonialLink 
{
    position: absolute;
    font-size: 70%;
    text-decoration: underline;
    color: #dedede;
    bottom: 2px;
    right: 0px;
    border-bottom: solid 1px #fff;
}

/* and set it to whiten on hover */
a:hover#testimonialLink
{
    color: #fff;
}

/* main container for all page content */
#wrapper 
{
    position: relative;
    text-align: left;
    height: 650px;
    width: 850px;
    border: 1px solid #fff;
    margin-left: auto;
    margin-right: auto;
    margin-top: 25px;
    margin-bottom: 0px;
    background: url(../media/images/bg-2col.jpg) repeat-y;
}

/* wrapper for the intro, centered horizontally */
#introWrapper 
{
    width: 352px;
    background: #000;
    position: relative;
    margin: 200px auto;
}

/* SKIP INTRO hyperlink */
#introWrapper a 
{
    padding-top: 10px;
    color: #fff;
    float: right;
    text-align: right;
    text-transform: uppercase;
    text-decoration: none;
}

/* div containing swf file */
#introWrapper #flashContainer
{
    padding: 0px;
    margin: 0px;
}

/* setup the header and position the horizontal line image */
#header
{
    margin: 0px 20px;
    height: 120px;
    background: url(../media/images/h-line.jpg) no-repeat bottom left;
}

/* use for prices in branding packages */
#heading-rhs 
{
    height: 106px;
    right: 30px;
    position: absolute;
    width: 275px;
    top: 0px;
}

/* style an image on the right hand side of the header */
#heading-rhs img 
{
    right: 40px;
    position: absolute;
    bottom: 8px;
}

/* container for the navigation */
#sidebar 
{
    height: 530px;
    width: 200px;
    float: left;
    background: url(../media/images/bg-sidebar.jpg) no-repeat bottom left;
}

/* clear left floats */
.clearFloats 
{
    clear: left;
}

/* position the navigator logo */
img#logo
{
    position: absolute;
    left: 30px;
    top: 60px;
}

/* styling for the bottom right pane with telephone and email details */
#contactPane
{
    position: absolute;
    background: #00476b;
    right: 0px;
    bottom: 20px;
    border: 1px solid #75c4f0;
    font-weight: bolder;
    color: #dedede;
    z-index: 1;
}
/* contact details are formatted as a list, normalise first */
#contactPane ul
{
    margin: 0px;
    padding: 0px;
}

/* left float to place the elements horizontally */
#contactPane li
{
    font-size: 70%;
    margin: 0px;
    list-style: none;
    float: left;
    padding: 0px 7px;
}

/* override link styling */
#contactPane a 
{
    position: relative;
    top: 6px;
    display: block;
    color: #dedede;
    font-weight: bolder;
    font-size: 100%;
    line-height: 100%;
}

/* highlight in white on mouseover */
#contactPane a:hover
{
    color: #fff;
}

/* container for all page content */
#mainContent 
{
    float: left;
    margin: 0px;
    padding: 0px;
}

/* style the content within a row in main section of the placeholder */
.contentRow 
{
    margin: 14px 0px 0px 14px;
    width: 636px;
}

/* top row of main content within the 2 row layout */
.contentRow.top #text
{
    padding-top: 2px;
    margin-top: 2px;
}

/* bottom row image of main content within the 2 row layout */
.contentRow.bottom img
{
    position: absolute;
    bottom: 30px;
}

/* create padding for entire text block and set colour */
.contentRow #text 
{
    color: #fff;
    width: 608px;
    padding: 0px 5px;
}

/* style each paragraph of text within a row of text */
.contentRow #text p
{
    width: 406px;
}

/* style an unordered list within a row of text */
.contentRow #text ul 
{
    margin-top: 0px;
    margin-left: 5px;
    padding: 0px;
    list-style: none;
}

/* and then its elements */
.contentRow #text li 
{
    padding-bottom: 5px;
    font-weight: bolder;
    font-size:100%;
}

/* container for portfolio section content */
.contentRow #portfolioContainer
{
    width: 422px;
    height: 512px;
    padding: 0px 0px;
    overflow-x: hidden;
    overflow-y: auto;
}

/* container for the 3 x 4 grid of portfolio icons */
.contentRow #portfolioContainer ul
{   
    padding-left: 19px;
    float: left;
    display: block;
    margin: 0px;
}

/* the individual portfolio icons */
.contentRow #portfolioContainer li
{ 
    display: block;
    padding: 0px;
    margin-right: 0px;
    list-style: none;
    float: left;
}

/* fade portfolio images and add necessary padding */
.contentRow #portfolioContainer li img 
{
    filter: alpha(opacity=60);   
    -moz-opacity: 0.5;
    opacity: 0.5;
    padding: 0px 10px 10px 0px;
    float: left;
}

/* portfolio icons make opaque when hover */
.contentRow #portfolioContainer li a:hover img
{
    filter: alpha(opacity=100);   
    -moz-opacity: 1.0;
    opacity: 1.0;
}

/* container for the contact form */
.contentRow #contactFormContainer 
{
    background: #383330;
    width: 412px;
    height: 482px;
    padding: 10px 0px;
    border: 1px solid #fff;
}

/* container for the packages section */
.contentRow #packageContainer 
{
    width: 412px;
    height: 502px;
    padding: 0px 0px;
}

/* container for package text */
.contentRow #packageContainer #packageContent 
{
    margin: 0px 10px;
    padding: 12px;
    padding-top: 20px;
    width: 358px;
    height: 410px;
    background: #96adbf;
    color: #000;
}

/* and styling for its paragraphs */
.contentRow #packageContainer #packageContent p 
{
    padding: 0px 10px;
    line-height: 13px;
    font-size: 85%;
}

/* hyperlink within the packages section */
#packageContent p a
{
    font-size: 100%;
    font-weight: normal;
    color: #000;
}

#packageContent p a:hover
{
    font-weight: bolder;
}

/* position the back button on packages section */
#packageContent img
{
    margin-left: 10px;
    position: absolute;
    bottom: 94px;
}

/* style the right hand column */
#rightCol 
{
    width: 180px;
    position: absolute;
    top: 134px;
    right: 30px;
    height: 516px;
}

/* specific styling for right hand column */
#rightCol h2
{
    padding-bottom: 0px;
    font-size: 100%;
}

/* where required make the background semi-transparent in all browsers */
#rightCol.semiTrans 
{
    background: url(../media/images/clear.png) repeat;
}

/* style the content in the rh colum */
#rightCol.semiTrans #rightCol-content
{
    padding-top: 10px;
}

/* unordered list in the right hand column */
#rightCol-content ul 
{
    text-indent: 0px;
    padding: 0px 10px;
    margin: 0px;
}

/* link in the right hand column */
#rightCol-content a
{
    font-size: 100%;
    color: #fff;
}

/* paragraph of text in the right hand column */
#rightCol-content p 
{
    margin: 10px 10px 0px 10px;
    color: #fff;
    font-size: 70%;
    line-height: 12px;
    font-weight: normal;
}

/* image within paragraph of text on the right */
#rightCol-content p img 
{
    padding-top: 10px;
}

/* bold content in rhs */
#rightCol-content .bold
{
    font-weight: bolder;
}

/* bold hyperlink without underline */
#rightCol-content .bold a
{
    font-weight: bolder;
    text-decoration: none;
}

/* these links are underlined on hover */
#rightCol-content p.bold a:hover
{
    font-weight: bolder;
    text-decoration: underline;
}

/* paragraph of small text */
#rightCol-content p.small 
{
    color: #75c4f0;
    margin-left: 0px;
    font-size: 60%;
}

/* headings underneath sections of text */
#rightCol-content h2.underneath 
{
    padding-top: 10px;
}

/* image hyperlinks in right hand column */
#rightCol-content a img
{
    display: block;
    margin-top: 10px;
    margin-left: 10px;
}

/* unordered list in right hand content section */
#rightCol-content ul 
{
    list-style: none;
}

/* styling for a bulletted version */
#rightCol-content ul.bulletted 
{
    list-style: disc;
}

/* define style for custom bulleted list in the rh col */
#rightCol-content ul.bulletted li 
{
    font-size: 100%;
    color: #74c4f0;
    list-style-position: inside;
    text-indent: 0px;
}

/* set the text to white when using custom colour bullets */
#rightCol-content ul.bulletted li .whiteText 
{
    font-size: 70%;
    line-height: 12px;
    color: #fff;
}

/* formatting for li elements within rh column */
#rightCol-content ul li
{
    text-indent: 0px;
    list-style-position: outside;
    margin: 10px 0px;
    padding: 0px;
    color: #fff;
    font-size: 70%;
    line-height: 12px;
}

/* special case for indented list items on packages section */
#rightCol-content ul.indented li
{
    margin-left: 12px;
    list-style-position: outside;
}

/* style an image within a list in the right hand column */
#rightCol-content li img 
{
    display: block;
    margin: 0px;
    padding: 0px;
    padding-top: 10px;
}

/* paragraph of text within packages section */
#packageContainer p 
{
    color: #000;
}

/* to return p to normal */
.normal 
{
    font-size: 100%;
    line-height: 100%;
    font-weight: normal;
}

/* override p to fill whole column */
p.fill 
{
    width: 608px !important;
}

/* set a div to be scrollable */
#scrollable
{
    overflow-y: auto;
    overflow-x: hidden;
    height: 502px;
}

/* not currently used
img.linkIcon 
{
    border: solid 1px #fff;
    height: 25px;
    width: 50px;
    padding: 0px;
    margin: 0px 10px;
}
*/

/* styling for individual contacts on the contact us page */
.contact .name
{
    font-weight: bolder;
    font-size: 130%;
    line-height: 140%;
}

.contact .position
{
    font-size: 120%;
}

.contact a
{
    font-weight: normal;
}

.contact a:hover
{
    font-weight: bolder;
}

.contact a.profile 
{
    line-height: 160%;
    text-decoration: none;
}