/**
  *
  *
  * @author James Thatcher <james@brandfour.com>
  * @version 0.2
  * @revision $Revision: 0.02 $
  * @date $Date: Thu, 28 June 2007 10:47:25 GMT $
  * $RCSfile: style.css,v $
  *
  * @todo
  *
  *
  * @history
  * Thu, 28 June 2007 10:47:37 GMT - Initially created file
  *
  *  UPDATES:
  *      - Added support for second row of links
  *      - Improved the #topmenu id to use the entire width of parent div
  *      - Added menu arrows to #topmenu
  *      - Updated header/content id's to inherit margin+background+width's from parent
  *
  **/

*{border:0;margin:0;padding:0;background:transparent;}

body {
    font-family: arial, verdana,trebuchet ms, verdana, arial, tahoma;
    font-size: 12px;
    color: #666666;
    /*line-height: 155%;*/
    line-height: 16px;
    margin-top: 0px;
    margin: auto;
    border: 0;
    background: #000000;
}

a:link {
    color:  #776754;
    font-weight: bold;
    text-decoration: none;
}
a:hover {
    color: #eee;
    font-weight: bold;
    text-decoration: none;
}
a:visited {
    color: #776754;
    font-weight: bold;
    text-decoration: none;
}

p {
    margin-bottom: 1em;
}

.textholderpadding {
    padding: 10px;
}

.subtitle {
    font-weight: 600;
    color: #776754;
    border-bottom: 1px solid #918477;
    margin-bottom: 8px;
}

.subloltitle {
    color: #776754;
    margin-bottom: 8px;
}

#pagesettings {
    display:inline;
    margin: auto;
    text-align: center;
}
#pagesettings #settings {
}
#pageConfig {
    width: 100%;
    display: block;
}
#marginholder {
    position: relative;
    height: auto;
    margin: 0;
    padding: 0;
}

    #margin {
        /*margin: 100px 0 0 100px;*/
        padding: 100px 0 0 100px;
        width: 900px;
        height: 600px;
/*        border-bottom: 1px solid #2F2F2E;*/
    }
        #margin #left {
            position: relative;
            height: 550px;
            background: #000000;
            float: left;
            width: 240px;
            z-index: 5000;
        }
            #margin #left #logo {
                display: block;
                height: 63px;
                width: 138px;
                background: url(images/logo.png) no-repeat;
            }
            #margin #left #logo a {
                display: block;
                text-indent: -5999em;
                height: 63px;
                width: 138px;
                background: url(images/logo.png) no-repeat;
            }

            #margin #left #leftlinks {
                width: 125px;
                display: block;
                margin-top: 70px;
            }
            #margin #left #leftlinks .leftpadding {
                height: 20px;
                display: block;
            }

            #margin #left #leftlinks #Brand_and_Identity {
                width: 185px;
                height: 18px;
                display: block;
                text-indent: -4000em;
                background: url(images/left-brand.png) no-repeat top;
            }
            #margin #left #leftlinks #Brand_and_Identity.sel,
            #margin #left #leftlinks #Brand_and_Identity:hover {
                background-position: bottom;
            }

            #margin #left #leftlinks #Digital_Web_Design_and_Development {
                width: 185px;
                height: 18px;
                display: block;
                text-indent: -4000em;
                background: url(images/left-digital.png) no-repeat top;
            }
            #margin #left #leftlinks #Digital_Web_Design_and_Development.sel,
            #margin #left #leftlinks #Digital_Web_Design_and_Development:hover {
                background-position: bottom;
            }

            #margin #left #leftlinks #Graphic_Design_for_Print {
                width: 185px;
                height: 18px;
                display: block;
                text-indent: -4000em;
                background: url(images/left-design.png) no-repeat top;
            }
            #margin #left #leftlinks #Graphic_Design_for_Print.sel,
            #margin #left #leftlinks #Graphic_Design_for_Print:hover {
                background-position: bottom;
            }

            #margin #left #leftlinks #Print_and_Display {
                width: 185px;
                height: 18px;
                display: block;
                text-indent: -4000em;
                background: url(images/left-print.png) no-repeat top;
            }
            #margin #left #leftlinks #Print_and_Display.sel,
            #margin #left #leftlinks #Print_and_Display:hover {
                background-position: bottom;
            }

            #margin #left #leftlinks #Showcase {
                width: 185px;
                height: 18px;
                display: block;
                text-indent: -4000em;
                background: url(images/left-showcase.png) no-repeat top;
            }
            #margin #left #leftlinks #Showcase.sel,
            #margin #left #leftlinks #Showcase:hover {
                background-position: bottom;
            }

            #margin #left #leftlinks #Our_Approach {
                width: 185px;
                height: 18px;
                display:  block;
                text-indent: -5400em;
                background: url(images/left-ourapproach.png) no-repeat top;
            }
            #margin #left #leftlinks #Our_Approach.sel,
            #margin #left #leftlinks #Our_Approach:hover {
                background-position: bottom;
            }
            #vacancyholder {
                position:absolute;
                top:340px;
            }
            #margin #left #vacancy {
                height: 20px;
                width: 127px;
                background: url(images/vacancy.png) no-repeat top left;
                display: block;
                text-indent: -5000em;
            }
            #margin #left #vacancy:hover {
                background-position: bottom;
            }
            #margin #left #telephoneholder {
                position: absolute;
                top: 400px;
            }
            #margin #left #telephone {
                height: 32px;
                width: 185px;
                background: url(images/telephone.png) no-repeat top;
                display: block;
                text-indent: -5000em;
            }
            #margin #left #telephone:hover {
                background-position: bottom;
            }
            #margin #left #enquiryholder {
                width: 185px;
                height: 18px;
            }
            #margin #left #enquiry {
                display: block;
                width: 185px;
                height: 18px;
                text-indent: -2000em;
                background: url(images/enquiry.png) no-repeat top;
            }
            #margin #left #enquiry:hover {
                background-position: bottom;
            }

            #margin #left #shopholder {
                width: 185px;
                height: 18px;
            }
            #margin #left #shop {
                display: block;
                width: 185px;
                height: 18px;
                text-indent: -2000em;
                background: url(images/shop-fourwear.png) no-repeat top;
            }
            #margin #left #shop:hover {
                background-position: bottom;
            }

        #rightholder {
            position: relative;
            width: 560px;
            height: auto;
            margin: 0;
            margin-left: 240px;
        }
        #right {
        }
                .blockpadding {
                }
                .blockheight {
                    display: block;
                    margin-top: 10px;
                    height: 10px;
                    clear: both;
                }
                #right #blocklinks {
                    /*position: relative;*/
                    height: 570px;
                    width: 570px !important;
                    max-width:570px !important;
                }
            #right #brand {
                float: left;
                width: 279px;
                height: 278px;
                text-indent: -5000em;
                background: url(images/link-brand.png) no-repeat top;
                clear: right;
            }
            #right #brand:hover,#right #brand.sel {
                background-position: bottom;
            }

            #right #digital {
                float: left;
                width: 277px;
                height: 280px;
                text-indent: -5000em;
                background: url(images/link-digital.png) no-repeat top;
                clear: right;
            }
            #right #digital:hover {
                background-position: bottom;
            }

            #right #design {
                float: left;
                width: 279px;
                height: 278px;
                text-indent: -5000em;
                background: url(images/link-design.png) no-repeat top;
                clear: right;
            }

            #right #design:hover {
                background-position: bottom;
            }

            #right #print {
                float: left;
                width: 277px;
                height: 280px;
                text-indent: -5000em;
                background: url(images/link-print.png) no-repeat top;
                clear: right;
            }

            #right #print:hover {
                background-position: bottom;
            }

            #showcaselinks {
                display: block;
                height: 20px;
                top: -20px;
                float: right;
                position: absolute;
                right: 0px;
            }
            #right #showcaselinks a {
                margin: 0 2px 0 2px;
            }
            #showcaselinks #previous {
                float: left;
                display: block;
                width: 63px;
                height: 20px;
                text-indent: -8000em;
                background: url(/images/previous.png) no-repeat top;
            }
            #showcaselinks #previous:hover {
                background-position: bottom;
            }

            #showcaselinks #details {
                float: left;
                display: block;
                width: 48px;
                height: 20px;
                text-indent: -8000em;
                background: url(/images/details.png) no-repeat top;
            }
            #showcaselinks #details:hover {
                background-position: bottom;
            }

            #showcaselinks #next {
                float: left;
                display: block;
                width: 39px;
                height: 20px;
                text-indent: -5000em;
                background: url(images/next.png) no-repeat top;
            }
            #showcaselinks #next:hover {
                background-position: bottom;
            }

            #right #edit {
                background: #fff;
                /*height: 560px;*/
                min-height: 560px;
                display:block;
            }
            #right #edit #editleft {
                float: left;
                position: relative;
                /*width: 215px;*/
                padding: 10px 0 0 15px;
            }
            #right #edit #editright {
                margin-left: 220px;
                width: 330px;
                height: auto;
                padding: 5px;
            }

    #footer {
        position: relative;
        width: 800px;
        /*margin-left: 100px;*/
        text-align: right;
        margin-top: 10px;
        border-top: 1px solid #2F2F2E;
    }

    #footer a {
        font-weight: 100;
        font-size: 10px;
    }

    .copy {
        color: #776754;
        font-size: 10px;
    }

    .ajax-loading {
        padding: 20px 0;
        background: url(images/spinner.gif) no-repeat center;
        z-index: 99999;
    }

    #showinfo {
        position: absolute;
        display: block;
        float: right;
        top: 0px;
        right: 10px;
    }
/*
    #pageConfig {
        position: absolute;
        float: left;
        width: 185px;
        height: 350px;
        background: url(images/image1hover.png) no-repeat;
        display: block;
        z-index: 4000;
    }*/


/*.ajax-loading input, .ajax-loading textarea, .ajax-loading label { display: none; }*/
    fieldset legend{
        color:#cc0033;
    }

    form.general br {
        display: none;
    }
    label {
        position: relative;
        width: 160px;
        float: left;
        padding: 2px 0;
    }
    form.general .right {
        font-size: 9px;
    }
    input.t{
        background-color: #F4F4F4;
        border-color: #CBCBCB #D1D1D1 #D3D3D3 #D3D3D3;
        border-style: solid;
        border-width: 1px;
        padding: 2px;
        width: 180px;
    }
    input.t:focus {
        background: #E0E0E0;
        border-color: #BBBDBC #CCCCCC #D3D3D3 #D3D3D3;
    }
    textarea {
        background-color: #F4F4F4;
        border-color: #CBCBCB #D1D1D1 #D3D3D3 #D3D3D3;
        border-style: solid;
        border-width: 1px;
        padding: 2px;
        width: 180px;
        height: 100px;
        font: inherit;
    }
    textarea:focus {
        background: #FFEFE0;
        border-color: #BBBDBC #CCCCCC #D3D3D3 #D3D3D3;
    }
    option {
        background: #F4F4F4;
        padding: 1px 0px 1px 5px;
    }
    select {
        background: #F4F4F4;
        border-color: #BBBDBC #CCCCCC #D3D3D3 #D3D3D3;
        border-style: solid;
        border-width: 1px;
    }
    input.s {
        color: #ffffff;
        border: 1px solid #333;
    }
    input.s:hover {
        background-position: bottom;
    }

    .cls {
        clear: both;
        display: block;
        height: 3px;
    }



    form.general {
}

/* 10/07/07 - thatch - Fixed opera bug; removed form.general from inputs */
form.general fieldset{
    border:none;
    margin:2px 5px 2px 8px !important;
    margin:0;padding:0;
}
.ajax-loading {
    padding: 20px 0;
    background: url(/images/spinner.gif) no-repeat center;
    z-index: 99999;
}
form.general fieldset legend{
    color:#cc0033;
}

form.general br {
    display: none;
}

form.general label {
    position: relative;
    width: 140px;
    float: left;
    padding: 2px 0;
}
form.general input.t{
    background-color: #F4F4F4;
    border-color: #CBCBCB #D1D1D1 #D3D3D3 #D3D3D3;
    border-style: solid;
    border-width: 1px;
    padding: 2px;
    width: 180px;
}
form.general input.ts{
    background-color: #F4F4F4;
    border-color: #CBCBCB #B2B2B2 #B2B2B2 #D3D3D3;
    border-style: solid;
    border-width: 1px;
    padding: 2px;
    width: 143px !important;
    width: 149px;
    /*width: 154px;*/
    margin-left: 0px;
    margin-right: 0px;
}
form.general input.t:focus {
    background: #E0E0E0;
    border-color: #BBBDBC #CCCCCC #D3D3D3 #D3D3D3;
}
form.general input.ts:focus {
background: #E0E0E0;
    border-color: #B2B2B2 #CCCCCC #D3D3D3 #B2B2B2;
}
form.general textarea {
    background-color: #F4F4F4;
    border-color: #CBCBCB #D1D1D1 #D3D3D3 #D3D3D3;
    border-style: solid;
    border-width: 1px;
    padding: 2px;
    width: 180px;
    height: 100px;
    font: inherit;
}
form.general textarea:focus {
    background: #E0E0E0;
    border-color: #BBBDBC #CCCCCC #D3D3D3 #D3D3D3;
}
form.general option {
    background: #F4F4F4;
    padding: 1px 0px 1px 5px;
}
form.general select {
    background: #F4F4F4;
    border-color: #BBBDBC #CCCCCC #D3D3D3 #D3D3D3;
    border-style: solid;
    border-width: 1px;
}
form.general input.s {
    border: 0;
    height: 19px;
    width: 121px;
    background: url(/images/enquiry-submit.png) no-repeat top left;
    text-indent: -4000em;
}
form.general input.g {
    border: 0;
    WIDTH: 84PX;
    HEIGHT: 23PX;
    text-indent: -5000em;
    background: url(/images/contact-submit.png) no-repeat top left;
}
form.general input.s:hover, form.general input.g {
    background-position: bottom;
}
.cls {
    clear: both;
    display: block;
    height: 3px;
}
.over {
    background: url(images/textarea_background.gif) repeat;
    cursor: pointer;
}
.hidden {display: none !important;}


.editbox {
    width: 285px;
    font: inherit;
}
#edittext {
        float: right;
        display: block;
        clear: both;
}
#edittextholder, #savetextholder, #canceltextholder {
    float: right;
    width: 70px;
    height: 20px;
    background: #ccddaa;
    text-align: center;
    margin: 0 4px;
    border-color: #CBCBCB #D1D1D1 #D3D3D3 #D3D3D3;
    border-style: solid;
    border-width: 1px;
} #savetextholder { width: 140px; }

#sbox-window.window-black
{
        background-color:		#000;
}
#sbox-window.window-black #sbox-content
{
        background-color:		#000;
}
#sbox-window.window-black.sbox-loading #sbox-content
{
        background-image:		url(/images/spinner.gif);
}
#sbox-overlay
{
        position:				absolute;
        background-color:		#000;
}

#sbox-window
{
        position:				absolute;
        /*background-color:		#fff;*/
        text-align:				left;
        overflow:				visible;
        /*padding:				10px;
        -moz-border-radius:		3px;*/
}

/*#sbox-btn-close
{
        position:				absolute;
        width:					30px;
        height:					30px;
        right:					-15px;
        top:					-15px;
        background:				url(/images/closebox.png) no-repeat top left;
        border:					none;
}

.sbox-loading #sbox-content
{
        background-image:		url(/images/spinner.gif);
        background-repeat:		no-repeat;
        background-position:	center;
}
*/
#sbox-content
{
        clear:					both;
        overflow:				auto;
        height:					100%;
        width:					100%;
        background: transparent;
}

#clone-me {
    background: transparent;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 16px;
    color: #999999;
    text-decoration: none;
}

#clone-me h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 18px;
    text-transform: capitalize;
    color: #FFFFFF;
    text-decoration: none;
}
#clone-me h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 16px;
    text-transform: none;
    color: #999999;
    text-decoration: none;
}
#clone-me .white {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 16px;
    color: #FFFFFF;
    text-decoration: none;
}
/*
.sbox-content-image#sbox-content
{
        overflow:				visible;
}

#sbox-image
{
        display:				block;
}

.sbox-content-image img
{
        display:				block;
}

.sbox-content-iframe#sbox-content
{
        overflow:				visible;
}*/





.boxy-wrapper { position: absolute; }
.boxy-wrapper.fixed { position: fixed; }
.boxy-modal-blackout { position: absolute; background-color: #303A42; left: 0; top: 0; }
.boxy-wrapper { empty-cells: show; }
.boxy-wrapper .top-left,.boxy-wrapper .top-right,.boxy-wrapper .bottom-right,.boxy-wrapper .bottom-left { width: 10px; height: 10px; padding: 0 }
:root .boxy-wrapper .boxy-top-left { background: url('/images/boxy/boxy-nw.png'); }
:root .boxy-wrapper .boxy-top-right { background: url('/images/boxy/boxy-ne.png'); }
:root .boxy-wrapper .boxy-bottom-right { background: url('/images/boxy/boxy-se.png'); }
:root .boxy-wrapper .boxy-bottom-left { background: url('/images/boxy/boxy-sw.png'); }
.boxy-wrapper .top-left { background: url('/images/boxy/boxy-nw.png'); }
.boxy-wrapper .top-right { background: url('/images/boxy/boxy-ne.png'); }
.boxy-wrapper .bottom-right { background: url('/images/boxy/boxy-se.png'); }
.boxy-wrapper .bottom-left { background: url('/images/boxy/boxy-sw.png'); }
.boxy-wrapper .top-left { #background: none; #filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/boxy/boxy-nw.png'); }
.boxy-wrapper .top-right { #background: none; #filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/boxy/boxy-ne.png'); }
.boxy-wrapper .bottom-right { #background: none; #filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/boxy/boxy-se.png'); }
.boxy-wrapper .bottom-left { #background: none; #filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/boxy/boxy-sw.png'); }
.boxy-wrapper .top,.boxy-wrapper .bottom { height: 10px; background-color: black; opacity: 0.6; filter: alpha(opacity=60); padding: 0 }
.boxy-wrapper .left,.boxy-wrapper .right { width: 10px; background-color: black; opacity: 0.6; filter: alpha(opacity=60); padding: 0 }
.boxy-wrapper .boxy-top,.boxy-wrapper .boxy-bottom { height: 10px; background-color: black; opacity: 0.6; filter: alpha(opacity=60); padding: 0 }
.boxy-wrapper .boxy-left,.boxy-wrapper .boxy-right { width: 10px; background-color: black; opacity: 0.6; filter: alpha(opacity=60); padding: 0 }
.boxy-wrapper .title-bar { background-color: black; padding: 6px; position: relative; }
.boxy-wrapper .title-bar.dragging { cursor: move; }
.boxy-wrapper .title-bar h2 { font-size: 12px; font-family:tahoma,helvetica,verdana,sans-serif;color: white; line-height: 1; margin: 0; padding: 0; font-weight: normal; border:0;}
/*.boxy-wrapper .title-bar .close { color: white; position: absolute; top: 6px; right: 6px; font-size: 90%; line-height: 1; }*/
.boxy-wrapper .title-bar .close { position:absolute; top: 3px; right: 3px;width:16px;height:16px;background:url(/images/cross.png) no-repeat; text-indent:-9999px;opacity:0.5;border:0;}
.boxy-wrapper .title-bar .close:hover {opacity:1}
.boxy-inner { background-color: white; padding: 0 }
.boxy-content { padding: 15px; }
.boxy-wrapper .question { width: 350px; min-height: 80px; }
.boxy-wrapper .answers { text-align: right; }


#job {padding:25px;font-size:13px;font-family:helvetica, arial,sans-serif;}
#job a:hover {color:#000;}
#job h1 {font-size:22px;font-family:arial, sans-serif;font-weight:bold;padding:0px 0 20px 0;}
#job p {line-height:22px;}