/*
Theme Name: common agency
Theme URI: http://www.commonagency.com
Description: version 1
Author: common agency
Author URI: http://www.commonagency.com
*/


/*
##-------------------------------------------------------------------
##
## FILE: style.css for use on www.commonagency.com
## CREATED: 01/12/08 by Kim Lawler, Common Agency Ltd.
##
## NOTES:
##
##-------------------------------------------------------------------
*/

/*
 SOME RULES FOR CONSISTENCY. NOT TO LIVE HERE FOREVER BUT JUST FOR NOW...
 
 1. Order CSS properties consistently for easier co-working. I think of it
 as structure followed by styling [often separated completely]. As a rule,
 you can't style something until you've built it! Therefore, working from the 'outside'
 of an element inwrads it should be something like...
 display, float, clear,  etc
 positioning, z-index, etc
 height, width, etc
 margin, border, padding [in that order - working out to in]
 border styling, rounded corners, etc [in css 3]
 background
 fonts
 text-alignment, text-decoration, etc.
 anything else
 
 2. Consistent code styling/layout. Agree preferred closing bracket position - indented or not?
 
 3. Stick to lowercase for properties where possible.
 
 4. Always use shorthand unless there is a good reason not to. Check out http://www.dustindiaz.com/css-shorthand/ if in doubt.
 
 5. Where suitable, indent/next related styles e.g. h3 span.bullet would be nested just after h3.
 
*/

/*-------------------------------------------------------------------
## CLIENT SPECIFIC NOTES

Main color:
Secondary color:
Preferred web font:

/*-------------------------------------------------------------------*/

/*-------------------------------------------------------------------
## HTML ELEMENTS START HERE */

body {
    padding: 12px 8px 12px 8px; /* Side-margins help with alignment at 800 x 600 */
    background: #020202 url('/x/img/bg/big_chill_bg_091112.jpg') top center no-repeat;
    line-height: 0.7em;
    color: #333333;
}

hr {
    display:block;
    clear:both;
    visibility:hidden;
    height: 0px;
    width: 100%;
    margin: 0px;
    padding: 0px;
}

dl {
    margin: 0px 22px;
}

dl dd {
    margin: 0 0 0 0;
}

dl dt {
    font-size: 1.3em;
    font-weight: bold;
}

h1 {
    display: block;
    float: left;
    width: 100%;
    margin: 5px 0;
    font: normal normal normal 2.4em/1.0em "Lucida Sans Unicode", "Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
    text-indent: 10px;
    letter-spacing: 0.25em;
}

h2 {
    display: block;
    width: 100%;
    margin: 0 0 10px 0;
    font: normal normal normal 1.8em/1.0em "Lucida Sans Unicode", "Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
    /* CSS3 */
    text-shadow: 1px 1px 2px #999999;
}

h3 {
    display: block;
    width: 100%;
    margin: 0 0 3px 0;
    padding: 5px 0 5px 5px;
    font: normal normal normal 1.4em/1.0em "Lucida Sans Unicode", "Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
}

h4 {
    display: block;
    margin: 0;
    padding: 5px 0 5px 5px;
    font: normal normal normal 1.4em/1.0em "Lucida Sans Unicode", "Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
}

a {
    text-decoration: underline;
    color: #660000;
}

a:hover {
    color: #000000;
}

a:active, a:focus {
    outline: 0;
}

    a.button, .button a {
        display: inline-block;
        font: normal normal normal 14px/1em "Lucida Sans Unicode", "Lucida Grande", Helvetica, Arial, sans-serif;
        border: 1px solid #666666;
        padding: 5px;
        background: #999999 url('img/static/bg_aButton_10x100.jpg') repeat-x 0px 0px;
        color: #000000;
        text-decoration: none;
    }
    
        a.button:hover, .button a:hover {
            border: 1px solid #333333;
            background: #999999 url('img/static/bg_aButton_10x100.jpg') repeat-x 0px -50px;
            color: #eeeeee;
            text-decoration: none;
        }
        
        a.button:active, .button a:active {
            border: 1px solid #990000;
        }

img {
    border: none 0px;
}

p {
    margin: 0 0 1em 0;
    font-size: 1.2em;
}

pre {
    font-size: 1.1em;
}

table,td,th {
    border: none 0;
}

td {
    text-align: left;
    vertical-align: top;
}

th {
    text-align: left;
    vertical-align: middle;
}

ul, dl, ol {
    display: block;
    margin: 0 12px 12px 6px;
    padding: 0;
    text-indent:0;
    list-style: none inside;
}

    ul.linkList {
        padding: 0 0 0 0;
        }

        ul.linkList li {
            margin: 0 0 4px 0;
            list-style: none;
            }
            
            ul.linkList li a {
                padding: 3px;
                background: #333333;
                color: #ffffff;
                font: normal normal bold 0.8em/1.0em Verdana;
                text-decoration: none;
                text-transform: uppercase;
                }
            
            ul.linkList li a:hover {
                background: #ff0000;
                }

li, dt, dd {
    margin: 0;
    padding: 0;
    list-style:none outside;
    font: normal normal normal 1.2em/1.4em "Lucida Sans Unicode", "Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
}

acronym {
    text-decoration: underline;
}

/*-------------------------------------------------------------------*/

/*-------------------------------------------------------------------
## MAIN LAYOUT BLOCKS START HERE

REMEMBER... the crux of this layout is a columns based format, centrally aligned, which is optimised
for 1024 x 768 but degrades gracefully to support 800 x 600 as long as no more than 12-columns are
used. The ideal is 12-col + stacked 3-cols, where the 3-cols should contain supplementary content
or advertising that will wrap beneath the 12-col block on smaller screens.

*/

/* header */
.blockHeader {
    display: block;
    position: relative;
    width: 960px;
    margin: 0 auto;
    padding: 6px 0 0 0;
    border-bottom: 10px solid #990000;
    height: 58px;
}

    .blockHeader .nav {
        float: right;
        padding: 30px 0 0 0;
    }
    
    .blockHeader .logo {
        float: left;
        background: url('img/common-logo.gif') top left no-repeat;
        width: 161px;
        height: 45px;
    }
    
    .blockHeader .logo a {
        display: block;
        width: 161px;
        height: 45px;
    }
    
        .blockHeader .logo span {
            display: none;
        }

/* central wrapper */
.blockContent {
    display: block;
    width: 960px;
    margin: 0px auto 10px auto;
    padding: 0px;
    border: none;
    text-align: left;
    background-color:#fff;
}
    .blockContent .introContainer {
        width: 916px;
        height: 266px;
        margin: 0;
        border-bottom: 10px solid #990000;
        padding: 22px;
        background: #111111 url('/x/img/bg/heroPanel_960x310.jpg') top left no-repeat;
    }
    
/* footer */
.blockFooter {
    display: block;
    clear: both;
    width: 960px;
    margin: 10px auto 20px auto;
    padding: 0 0 10px 0;
}

.blockFooter .topFooter {
    display: block;
    float: left;
    width: 920px;
    padding: 10px;
    background-color: #999999;
    border: 10px solid #666666;
}

.blockFooter .lowerFooter {
    display: block;
    float: left;
    width: 910px;
    margin: 10px 0 0 0;
    padding: 10px;
    background: #666666;
    border: 10px solid #333333;
}

/* Layout columns... based on 15 x 50px grid with 16 x 12px gutters + 9px extra each side of page */
/* NOT TRUE: Columns are now only content holders e.g. they include the far-right gutter and hence columns can be nested */
/* Columns are used to build the main layout parts of a page. They should contain components, not nested columns. */
.blockColumn15 { /* WARNING: THIS SHOULD RARELY IF EVER BE USED AS IT WILL BREAK THE ABILITY TO DEGRADE TO 800 X 600 */
    float: left;
    width: 930px; /* [15 x 50px] + [15 x 12] */
    margin: 0 0 12px 0;
}

.blockColumn12 {
    float: left;
    width: 744px; /* [12 x 50px] + [12 x 12] */
    margin: 0 0 12px 0;
}

.blockColumn10 {
    float: left;
    width: 620px; /* [10 x 50px] + [10 x 12] */
    margin: 0 0 12px 0;
}

.blockColumn9 {
    float: left;
    width: 558px; /* [9 x 50px] + [9 x 12] */
    margin: 0 0 12px 0;
}

.blockColumn8 {
    float: left;
    width: 496px; /* [8 x 50px] + [8 x 12px] */
    margin: 0 0 12px 0;
}

.blockColumn6 {
    float: left;
    width: 372px; /* [6 x 50px] + [6 x 12px] */
    margin: 0 0 12px 0;
}

.blockColumn5 {
    float: left;
    width: 310px; /* [5 x 50px] + [5 x 12px] */
    margin: 0 0 12px 0;
}

.blockColumn4 {
    float: left;
    width: 248px; /* [4 x 50px] + [4 x 12px] */
    margin: 0 0 12px 0;
}

.blockColumn3 {
    float: left;
    width: 186px; /* [3 x 50px] + [3 x 12px] */
    margin: 0 0 12px 0;
}

.blockColumn2 {
    float: left;
    width: 124px; /* [2 x 50px] + [2 x 12px] */
    margin: 0 0 12px 0;
}

.blockColumn1 {
    float: left;
    width: 62px; /* [1 x 50px] + [1 x 12px] */
    margin: 0 0 12px 0;
}

.blockColumnDebug {
    background: red url('/x/img/bgGridCols.gif') no-repeat top left;
}

/* Components [grouped blocks of content within columns] */
.comp8 {
    float: left;
    width: 484px; /* [8 x 50px] + [8 x 12px] - 12px */
    margin: 0 12px 12px 0;
    /*background: yellow;*/
}

.comp4 {
    float: left;
    width: 236px; /* [4 x 50px] + [4 x 12px] - 12px */
    margin: 0 12px 12px 0;
}

.comp3 {
    float: left;
    width: 174px; /* [3 x 50px] + [3 x 12px] - 12px */
    margin: 0 12px 12px 0;
    background: #999999;
}

/*-------------------------------------------------------------------*/

/*-------------------------------------------------------------------
## NAVIGATION STYLES START HERE */
.nav ul {
    margin: 0;

}
.nav ul li {
    list-style-type: none;
    display: inline-block;
    float: left;
    color: #ffffff;
    margin: 0 5px;
    font: normal normal bold 14px/1.4em "Lucida Sans Unicode", "Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
}

    .nav ul li a {
        display: block;
        height: 17px;
        border: 1px solid #999999;
        border-bottom: none;
        padding: 5px 15px;
        background: #999999 url('img/static/bg_topNavTab_10x150.jpg') repeat-x 0px 0px;
        color: #000000;
        text-decoration: none;
    }
    
        .nav ul li a:hover {
            border: 1px solid #666666;
            border-bottom: none;
            background: #666666 url('img/static/bg_topNavTab_10x150.jpg') repeat-x 0px -50px;
            color: #ffffff;
            text-decoration: none;
        }
        
        .nav ul li a.selected {
            border: 1px solid #990000;
            border-bottom: none;
            background: #990000 url('img/static/bg_topNavTab_10x150.jpg') repeat-x 0px -100px;
            color: #ffffff;
            text-decoration: none;
        }

/*-------------------------------------------------------------------*/

/*-------------------------------------------------------------------
## FORM STYLES START HERE */

/*-------------------------------------------------------------------*/

/*-------------------------------------------------------------------
## ADMIN STYLES START HERE */

/*-------------------------------------------------------------------*/

/*-------------------------------------------------------------------
## BUTTON STYLES START HERE */

.buttonPanel a, .buttonPanel button, table td.buttons a {
    display:block;
    float:left;
    margin:0 7px 0 0;
    background-color:#f5f5f5;
    border:1px solid #999999; border-top:1px solid #cccccc; border-left:1px solid #cccccc;
    font: normal normal bold 1.1em/1.4em "Lucida Sans Unicode", "Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
    text-decoration:none;
    color:#565656;
    cursor:pointer;
    padding:5px 10px 6px 7px; /* Links */
}

    table td.buttons a {
        font-size: 0.9em;
        padding: 2px 5px 2px 5px;
    }

.buttonPanel button {
    overflow: visible;
    width: auto;
    padding: 4px 10px 3px 7px; /* IE6 */
}
.buttonPanel button[type] {
    padding: 5px 10px 5px 7px; /* Firefox */
    line-height: 17px; /* Safari */
}
*:first-child+html button[type] {
    padding: 4px 10px 3px 7px; /* IE7 */
}
.buttonPanel button img, .buttonPanel a img, table td.buttons a img {
    margin: 0 3px -3px 0 !important;
    padding: 0;
    border: none;
    width: 16px;
    height: 16px;
}

/* Standard actions */
.buttonPanel button:hover, .buttonPanel a:hover, table td.buttons a:hover {
    background-color: #dff4ff;
    border: 1px solid #c2e1ef;
    color: #336699;
}
.buttonPanel a:active, table td.buttons a:active {
    background-color: #6299c5;
    border: 1px solid #6299c5;
    color: #ffffff;
}

/* Positive actions */
button.positive, .buttonPanel a.positive, table td.buttons a.positive {
    color: #529214;
}
.buttonPanel a.positive:hover, button.positive:hover, table td.buttons a.positive:hover {
    background-color: #E6EFC2;
    border: 1px solid #C6D880;
    color: #529214;
}
.buttonPanel a.positive:active, table td.buttons a.positive:active {
    background-color: #529214;
    border: 1px solid #529214;
    color: #fff;
}

/* Negative actions */
.buttonPanel a.negative, button.negative, table td.buttons a.negative {
    color: #d12f19;
}
.buttonPanel a.negative:hover, button.negative:hover, table td.buttons a.negative:hover {
    background: #fbe3e4;
    border: 1px solid #fbc2c4;
    color: #d12f19;
}
.buttonPanel a.negative:active, table td.buttons a.negative:active {
    background-color: #d12f19;
    border: 1px solid #d12f19;
    color: #ffffff;
}


/*-------------------------------------------------------------------*/

/*-------------------------------------------------------------------
## TABLE STYLES START HERE */

table {
    width: 100%;
    margin: 5px 0 0 0;
}

    table tr td, table tr th {
        border-bottom: 1px solid #cccccc;
        padding: 3px;
        font: normal normal normal 1.2em/1.0em Helvetica, Arial, sans-serif;
        vertical-align: middle;
    }
    
    table tr th {
        border-bottom: 1px solid #333333;
        font-weight: bold;
    }

/*-------------------------------------------------------------------*/

/*-------------------------------------------------------------------
## MESSAGE DISPLAY STYLES START HERE */

/*-------------------------------------------------------------------*/

/*-------------------------------------------------------------------
## FUNCTIONAL STYLES START HERE */

/* float clearer */
.fc, .s{
    clear: both;
    visibility: hidden;
    overflow: hidden;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    line-height: 0;
}

/*-------------------------------------------------------------------*/

/*-------------------------------------------------------------------
## FOOTER STYLES START HERE */

.blockFooter a {
    color: #333333;
}

.blockFooter a.white {
    color: #eeeeee;
}

.blockFooter .topFooter ul li {
    display: block;
    font: normal normal normal 12px/1.0em "Geneva", "Tahoma", Helvetica, Arial, sans-serif;
    margin: 4px 0;
}

.blockFooter .topFooter h4 {
    display: inline;
    padding: 2px 5px;
    color: #ffffff;
    background: #666666;
    font: normal normal normal 12px/1.0em "Lucida Sans Unicode", "Lucida Grande", Helvetica, Arial, sans-serif;
}

.infoblock {
    display: block;
    float: left;
    width: 350px;
    font: normal normal normal 12px/1.0em "Geneva", "Tahoma", Helvetica, Arial, sans-serif;
    margin: 10px 0;
    padding: 0 5px 0 0;
}

.contactus {
    display: block;
    float: left;
    width: 170px;
    vertical-align: top;
    font: normal normal normal 12px/1.0em "Geneva", "Tahoma", Helvetica, Arial, sans-serif;
    margin: 10px 2px;
    padding: 0 5px 0 0;
}

ul.feedlist {
    display: block;
    margin: 10px 0 0 0;
    padding: 0;
    border: 0;
}

.blockFooter .topFooter ul li.contactus {
    width: 170px;
}

    .blockFooter .topFooter p {
        margin: 8px 0 0 0;
        font: normal normal normal 12px/1.0em "Geneva", "Tahoma", Helvetica, Arial, sans-serif;
    }

    
        .blockFooter .topFooter ul li ul {
            margin: 10px 0 0 0;
        }

        .blockFooter .topFooter ul li ul li{
            margin: 0;
            padding: 0 0 4px 0;
        }
        
.blockFooter .lowerFooter .bgImageThumb{
    float: left;
}

.blockFooter .lowerFooter .bgImageMeta {
    float: left;
    width: 680px;
}

    .blockFooter .lowerFooter .bgImageMeta ul {
        margin: 0; 
        padding: 0;
    }
    
    .blockFooter .lowerFooter a {
        color: #222222;
    }
    
        .blockFooter .lowerFooter .bgImageMeta h4 span.kicker {
            margin: 0;
            padding: 5px 5px 5px 5px;
            background: #333333;
            color: #ffffff;
            font: normal normal normal 12px/1.2em "Lucida Sans Unicode", "Lucida Grande", Helvetica, Arial, sans-serif;
        }
        
        .blockFooter .lowerFooter .bgImageMeta h4 span.imageTitle {
            margin: 0;
            padding: 5px 5px 5px 5px;
            background: #ffffff;
            color: #333333;
            font: normal normal normal 12px/1.2em "Lucida Sans Unicode", "Lucida Grande", Helvetica, Arial, sans-serif;
        }
        
        .blockFooter .lowerFooter .bgImageMeta ul li ul.creativecommons li {
            list-style-type: none;
            color: #cccccc;
            display: inline-block;
            padding: 5px 5px 5px 5px;
            margin: 5px 0;
            font: normal normal normal 12px/1.2em "Geneva", "Tahoma", Helvetica, Arial, sans-serif;
        }
        
        .blockFooter .lowerFooter .bgImageMeta ul li ul.creativecommons li ul.downloads {
            margin: 5px 0;
            padding: 0 0 5px 95px;
            background: transparent url(img/creativecommons.gif) top left no-repeat;
            list-style-type: none;
            font: normal normal normal 12px/1.2em "Geneva", "Tahoma", Helvetica, Arial, sans-serif;
        }
        
            .blockFooter .lowerFooter .bgImageMeta ul li ul.creativecommons li ul.downloads li {
                display: block;
                margin: 0;
                padding: 0 0 3px 0;
                font: normal normal normal 12px/1.2em "Geneva", "Tahoma", Helvetica, Arial, sans-serif;
            }
        
/*-------------------------------------------------------------------*/

/*-------------------------------------------------------------------
## DEBUG STYLES START HERE */

.blockDebug {
    width: 760px;
    margin: 0 auto;
    border: 1px dashed #999999;
    padding: 0px;
    background-color: #ffffff;
    text-align: left;
}

.blockDebug {
    margin-top: 15px;
}

.blockDebug li strong {
    font-size: 12px;
}

.blockDebug pre {
    color: blue;
    font-size: 11px;
}

/*-------------------------------------------------------------------*/

/*-------------------------------------------------------------------
## REMAINING MISC STYLES START HERE */

.introContainer .textContainer {
    float: left;
    width: 470px;
    margin: 0;
    padding: 0 0 0 10px;
}

    .introContainer .textContainer h1 {
        width: 450px;
        margin: 0 0 20px 0;
        padding: 20px 0 0 10px;
        font: normal normal normal 40px/1.0em "Lucida Sans Unicode", "Lucida Grande", Helvetica, Arial, sans-serif;
        letter-spacing: normal;
        color: #ffffff;
        text-indent: 10px;
        /* CSS3 */
        text-shadow: 3px 3px 5px #000000;
    }

    .introContainer .textContainer p {
        width: 450px;
        margin: 20px 0 0 0;
        padding: 0 0 0 20px;
        font: normal normal normal 16px/1.3em "Lucida Sans Unicode", "Lucida Grande", Helvetica, Arial, sans-serif;
        color: #ffffff;
        /* CSS3 */
        text-shadow: 2px 2px 3px #000000;
    }

.introContainer .imageContainer {
    display: block;
    float: right;
    width: 400px;
    height: 266px;
    margin: 0;
    padding: 0;
}

    .introContainer .imageContainer a {
    }

.introContainer .featureContainer {
    float: left;
    width: 510px;
    margin: 0;
    padding: 0 0 0 10px;
}
    .introContainer .featureContainer .featureImage {
        float: left;
        margin: 85px 0 0 0;
    }
    
    .introContainer .featureContainer .featureImage a img {
        border: 1px solid #990000;
    }
    
    .introContainer .featureContainer .featureImage a:hover img {
        border: 1px solid #333333;
    }
    
    .introContainer .featureContainer .featureInfo {
        float: left;
        width: 150px;
        margin: 90px 0 0 0;
        padding: 0 0 0 10px;
    }
    
        .introContainer .featureContainer .featureInfo h2 {
            font: normal normal normal 24px/1.2em "Lucida Sans Unicode", "Lucida Grande", Helvetica, Arial, sans-serif;
            color: #000000;
        }
        
        .introContainer .featureContainer .featureInfo p {
            font: normal normal normal 14px/1.2em "Lucida Sans Unicode", "Lucida Grande", Helvetica, Arial, sans-serif;
            color: #333333;
        }
    
.workContainer {
    width: 960px;
    margin: 0 auto;
    padding-bottom: 0;
    background-color:#FFFFFF;
}

    .workContainer .workTop {
        padding:12px 0px 0px 20px;
        margin:0px;
        border-bottom: 10px solid #990000;
        background:#000 url('/x/img/content/top_bar_bg.jpg') no-repeat scroll top center;
        height:38px;
    }

    .workContainer .workTop h2 {
        letter-spacing: normal;
        font: normal normal normal 20px/1em "Lucida Sans Unicode", "Lucida Grande", Helvetica, Arial, sans-serif;
        color:#fff;
        /* CSS3 */
        text-shadow: 2px 2px 3px #000000;
    }

        .workContainer .workTop h2 span {
            background: #990000;
            margin-right: 10px;
            padding: 3px 8px;
            color:#fff;
            /* CSS3 */
            -webkit-border-radius: 5px;
        	-moz-border-radius: 5px;
            text-shadow: 2px 2px 3px #000000;
        }        
    
.workContainer .workFeatures {
    margin: 0;
    padding:0px 10px 0px 10px;
    border-left:10px solid #eee;
    border-right:10px solid #eee;
}
    
        .workContainer .workFeatures .item {
            display: block;
            float: left;
            width: 170px;
            margin: 10px 17px 0 0px;
            padding: 0 0 12px 0;
        }
        
            .workContainer .workFeatures .lastItem {
                margin-right: 0px;
            }
        
        .workContainer .workFeatures .item h4 {
            padding:0px;
        }
        
            .workContainer .workFeatures .item h4 span {
                display: block;
                padding: 6px 0 0 0;
                font: normal normal normal 12px/1.2em "Lucida Sans Unicode", "Lucida Grande", Helvetica, Arial, sans-serif;
                background: url(img/thumbShadow1.jpg) top no-repeat;
                margin-top: -3px;
                text-align: center;
            }
            
            .workContainer .workFeatures .item a img {
                border: 1px solid #cccccc;
            }
        
            .workContainer .workFeatures .item h4 a span {
                color: #666666;
                text-decoration: none;
            }
            
                .workContainer .workFeatures .item h4 a:hover img {
                    border: 1px solid #666666;
                }
                
                .workContainer .workFeatures .item h4 a:hover span {
                    color: #000000;
                    text-decoration: underline;
                }

/*----------------------------------
 * FOR THE FEED AREA
 * ---------------------------------*/


.blockContent .feedContainer {
    float: left;
    width: 710px;
    padding: 20px 20px 50px 20px;
    border-left:10px solid #eee;
    background-color:#fff;
}

.blockContent h1.feed {
    padding:12px 0px 0px 20px;
    margin:0px;
    border-bottom:10px solid #900;
    background:#000 url('/x/img/content/top_bar_bg.jpg') no-repeat scroll top center;
    height:38px;
    letter-spacing: normal;
    font: normal normal normal 20px/1em "Lucida Sans Unicode", "Lucida Grande", Helvetica, Arial, sans-serif;
    margin: 0;
    text-indent: 0;
    color:#FFF;
    width:940px;
    /* CSS3 */
    text-shadow: 2px 2px 3px #000000;
}

.blockContent h1.feed span {
    background: #990000;
    margin-right: 10px;
    padding: 3px 8px;
    color: #ffffff;
    /* CSS3 */
    -webkit-border-radius: 5px;
	-moz-border-radius: 5px;
    text-shadow: 2px 2px 3px #000000;
}

.blockContent .feedContainer h2, .blockContent .feedContainer h3 {
     /* CSS3 */
     text-shadow: 1px 1px 2px #999999;
 }
    
    .blockContent .feedContainer ul li {
         list-style-type: none;
     }

    .blockContent .feedContainer .mostRecent {
        background: url(img/most-recent-feed-bg.jpg) no-repeat bottom;
        width: 708px;
        padding: 0 0 17px 0;
    }

    .blockContent .feedContainer .mostRecent .content {
        border: 1px solid #CCCCCC;
        border-bottom: none;
        padding: 5px 5px 25px 5px;
    }
    
        .blockContent .feedContainer .mostRecent .content h2 {
            color: #990000;
            padding: 3px;
            font: normal normal normal 20px/1em "Lucida Sans Unicode", "Lucida Grande", Helvetica, Arial, sans-serif;
        }
        
        .blockContent .feedContainer .mostRecent .content p {
            font: normal normal normal 16px/1.4em "Lucida Sans Unicode", "Lucida Grande", Helvetica, Arial, sans-serif;
        }
        
        /* Styling unordered lists in the main feed item */
        .blockContent .feedContainer .mostRecent .content ul ul {
            margin-bottom: 0;
            padding-bottom: 0;
            padding-left: 10px;
        }
        
        .blockContent .feedContainer .mostRecent .content ul > li {
            list-style: square inside url('/x/img/static/li-top.gif');
            font: normal normal normal 14px/1.4em "Lucida Sans Unicode", "Lucida Grande", Helvetica, Arial, sans-serif;
        }
            
            .blockContent .feedContainer .mostRecent .content ul > li li {
                list-style: square inside url('/x/img/static/li-sub.gif');
                font: normal normal normal 14px/1.4em "Lucida Sans Unicode", "Lucida Grande", Helvetica, Arial, sans-serif;
                color: #666666;
            }
        
        /* Styling ordered lists in the main feed item */
        .blockContent .feedContainer .mostRecent .content ol ol {
            margin-bottom: 0;
            padding-bottom: 4px;
            padding-left: 16px;
        }
        
        .blockContent .feedContainer .mostRecent .content ol > li {
            list-style: decimal inside;
            font: normal normal normal 14px/1.4em "Lucida Sans Unicode", "Lucida Grande", Helvetica, Arial, sans-serif;
        }
            
            .blockContent .feedContainer .mostRecent .content ol > li li {
                list-style: lower-alpha inside;
                font: normal normal normal 14px/1.4em "Lucida Sans Unicode", "Lucida Grande", Helvetica, Arial, sans-serif;
                color: #666666;
            }

        /* Styling unordered lists in the feed archive */
        div.feedContainer dd.odd ul ul, div.feedContainer dd.even ul ul {
            margin-bottom: 0;
            padding-bottom: 0;
            padding-left: 10px;
        }
        
        .feedContainer .archive dl dd.odd .js_content ul > li, .feedContainer .archive dl dd.even .js_content ul > li {
            list-style: square inside url('/x/img/static/li-top.gif');
            font: normal normal normal 14px/1.4em "Lucida Sans Unicode", "Lucida Grande", Helvetica, Arial, sans-serif;
        }

            .feedContainer .archive dl dd.odd .js_content ul > li li, .feedContainer .archive dl dd.even .js_content ul > li li {
                list-style: square inside url('/x/img/static/li-sub.gif');
                font: normal normal normal 14px/1.4em "Lucida Sans Unicode", "Lucida Grande", Helvetica, Arial, sans-serif;
                color: #666666;
            }

        /* Styling ordered lists in the feed archive */
        div.feedContainer dd.odd ol ol, div.feedContainer dd.even ol ol {
            margin-bottom: 0;
            padding-bottom: 4px;
            padding-left: 16px;
        }

        .feedContainer .archive dl dd.odd .js_content ol > li, .feedContainer .archive dl dd.even .js_content ol > li {
            list-style: decimal inside;
            font: normal normal normal 14px/1.4em "Lucida Sans Unicode", "Lucida Grande", Helvetica, Arial, sans-serif;
        }

            .feedContainer .archive dl dd.odd .js_content ol > li li, .feedContainer .archive dl dd.even .js_content ol > li li {
                list-style: lower-alpha inside;
                font: normal normal normal 14px/1.4em "Lucida Sans Unicode", "Lucida Grande", Helvetica, Arial, sans-serif;
                color: #666666;
            }

        .archive dd.odd .meta, .archive dd.even .meta {
            display: block;
            float: left;
            width: 90%;
        }
        
        /*.archive dd.odd p, .archive dd.even p {
            display: block;
            float: left;
        }*/
        
        .content .meta, dd .meta {
            padding: 5px 0 0 0;
            font: normal normal normal 12px/1em "Lucida Sans Unicode", "Lucida Grande", Helvetica, Arial, sans-serif;
        }
        
        .content .meta a, .content .meta a:link, .content .meta a:visited, .content .meta a:active, dd .meta a, dd .meta a:link, dd .meta a:visited, dd .meta a:active {
            color: #666666;
        }

            .content .meta a:hover, dd .meta a:hover {
                color: #990000;
            }
        
    .blockContent .feedContainer .feedToggle {
        margin: 5px 0 20px 0;
    }
    
    .blockContent .feedContainer .feedToggle ul li {
        font: normal normal normal 14px/1em "Lucida Sans Unicode", "Lucida Grande", Helvetica, Arial, sans-serif;
        margin: 0 5px 5px 0;
        display: inline-block;
        float: left;
    }
        .blockContent .feedContainer .feedToggle ul li a {
            display: block;
            border: 1px solid #cccccc;
            padding: 5px;
            background: #cccccc url('img/static/bg_tag_10x150.jpg') repeat-x 0px 0px;
            color: #666666;
            text-decoration: none;
        }
        
            .blockContent .feedContainer .feedToggle ul li a:hover {
                border: 1px solid #666666;
                background: #999999 url('img/static/bg_tag_10x150.jpg') repeat-x 0px -50px;
                color: #eeeeee;
                text-decoration: none;
            }
        
        .blockContent .feedContainer .feedToggle ul li a.selected {
            border: 1px solid #333333;
            background: #333333 url('img/static/bg_tag_10x150.jpg') repeat-x 0px -100px;
            color: #ffffff;
            text-decoration: none;
        }

.blockContent .feedContainer p {
    line-height: 1.4em;
}
    
.blockContent .feedContainer .archive dl {
    display: block;
    float: left;
    width: 690px;

}

.blockContent .feedContainer .archive dl dt {
    display: block;
    float: left;
    clear: right;
    width: 170px;
    height: 20px;
    border-top: 1px solid #cccccc;
    padding: 5px;
    margin: 0;
    color: #CCCCCC;
    font: normal normal normal 12px/1em "Lucida Sans Unicode", "Lucida Grande", Helvetica, Arial, sans-serif;
}

.blockContent .feedContainer .archive dl dt.empty {
    border: none;
}

.blockContent .feedContainer .archive dl dd {
    display: block;
    float: right;
    width: 490px;
    padding: 10px;
    margin: 0 0 5px 0;
}
    .blockContent .feedContainer .archive dl dd h3 {
        padding: 0;
    }
    .blockContent .feedContainer .archive dl dd ol, .blockContent .feedContainer .archive dl dd ol li {
        list-style: decimal inside;
    }
    .blockContent .feedContainer .archive dl dd ul, .blockContent .feedContainer .archive dl dd ul li {
        list-style: square inside;
    }

.odd {
    background-color: #f3e3e3;
}
.even {
    background-color: #ffffff;
}

.blockContent .rightSidebar {
     float: left;
    width: 170px;
    padding: 20px 10px 30px 10px;
    background-color:#f3e3e3;
    border-right:10px solid #d3c3c3;
 }
 
 .blockContent .rightSidebar h4 {
     margin-bottom:5px;
 }
 
     .blockContent .rightSidebar ul li {
         list-style-type: none;
     }
    
    .blockContent .rightSidebar ul li h4 {
        font: normal normal normal 14px/1.2em "Lucida Sans Unicode", "Lucida Grande", Helvetica, Arial, sans-serif;
    }
    
        .blockContent .rightSidebar ul li ul li {
            font: normal normal normal 14px/1.2em "Lucida Sans Unicode", "Lucida Grande", Helvetica, Arial, sans-serif;
        }
            
/*-----------------------------------
 * Additional styles for comment area
 */    

 .commentarea {
     font: normal normal normal 14px/1.2em "Lucida Sans Unicode", "Lucida Grande", Helvetica, Arial, sans-serif;
    margin: 5px 0;
 }


 /*---------------------------------
  * 
  * This is missing a lot of the styles
  * required for the wordpress install.
  * The layout will look screwy to begin with!
  */


/*----------------------
 * Styles for About page
 */    
 
.textContent {
    display: block;
    float: left;
    width: 710px;
    margin: 0px 0 0px 0;
    padding: 20px;
    font-size: 120%;
    background-color:#fff;
    border-left:10px solid #eee;
}

    .textContent h2 {
        color: #990000;
        font: normal normal normal 20px/1.2em "Lucida Sans Unicode", "Lucida Grande", Helvetica, Arial, sans-serif;
    }
    
    .blockContent .textContent .mostRecent {
        background: transparent url(img/most-recent-feed-bg.jpg) no-repeat bottom center;
        width: 710px;
        padding: 0 0 20px 0;
        margin: 0 0 0 0;
    }

    .blockContent .textContent .mostRecent .content {
        border: 1px solid #CCCCCC;
        border-bottom: none;
        padding: 10px 10px 20px 10px;
    }
    
    .blockContent .textContent .mostRecent .content p {
        font: normal normal normal 16px/1.2em "Geneva", "Tahoma", Helvetica, Arial, sans-serif;
        color: #333333;
        margin: 0;
    }

.textCol {
    display: block;
    float: left;
    width: 340px;
    margin: 0 0 10px 0px;
}

    .textCol img {
        border: 0;
        margin: 8px 8px 4px 0;
        padding: 0;
    }
    .textCol h2, .textCol h3 {
        color: #990000;
        border: 0;
        margin: 8px 0 4px 0;
        padding: 0;
    }
    .textCol h2 {
        font: normal normal normal 20px/1.2em "Lucida Sans Unicode", "Lucida Grande", Helvetica, Arial, sans-serif;
    }
    .textCol h3 {
        font: normal normal normal 14px/1.2em "Lucida Sans Unicode", "Lucida Grande", Helvetica, Arial, sans-serif;
    }
    
    .textCol p {
        font: normal normal normal 14px/1.2em "Geneva", "Tahoma", Helvetica, Arial, sans-serif;
        color: #333333;
    }
    
    .stickies img {
        float: left;
    } 

.blockContent .textContent .mostRecent .contact {
    float: left;
    padding: 15px 10px 25px 10px;
}

.mostRecent .contact .textCol {
    float: left;
    width: 340px;
    margin: 0 0 0 0;
}

    .mostRecent .contact .textCol p {
        padding: 0 0 0 5px;
    }
    
    .mostRecent .contact .textCol h3 {
        padding: 0 0 0 5px;
        font: normal normal normal 24px/1.2em "Geneva", "Tahoma", Helvetica, Arial, sans-serif;
        color: #333333;
        margin-top: 10px;
    }
    
    .mostRecent .contact .textCol h3 a {
        font: normal normal normal 24px/1.2em "Geneva", "Tahoma", Helvetica, Arial, sans-serif;
    }

.textColRight, .mostRecent .contact .textColRight {
    float: left;
    margin-left: 20px;
}
    
.rightCol {
    display: block;
    float: right;
    width: 200px;
    margin: 0 0px 20px 0;
    padding:0px;
}

.biog {
    display: block;
    float: left;
    width: 170px;
    padding: 20px 5px 10px 15px;
    margin: 0px;
    background-color: #f3e3e3;
    border-bottom:10px solid #d3c3c3;
    border-right:10px solid #d3c3c3;
}
    .biog img {
        display: block;
        padding: 0 4px 0 0;
        float: left;
        margin:0px 5px 5px 0px;
    }
    .biog h3 {
        display: block;
        padding: 0px;
        width: 103px;
        float: left;
        font-size: 1.4em;
    }
    .biog h4 {
        display: block;
        padding: 0px;
        width: 103px;
        float: left;
        font-size: 1.0em;
    }
    .biog p {
        display: block;
        padding: 0px;
        width: 162px;
        float: left;
    }

.accordion_section {
    width: 350px;
    display: block;
    float: left;
}

.toggleblock {
    display: block;
    float: left;
    width: 350px;
    margin: 4px 0 4px 0;
    background-color: #cccccc;
    color: #ffffff;
}

.toggler {
    display: block;
    float: left;
    font: normal normal normal 14px/1em "Lucida Sans Unicode", "Lucida Grande", Helvetica, Arial, sans-serif;
    border: 1px solid #666666;
    padding: 5px;
    background: #999999 url('img/static/bg_aButton_10x100.jpg') repeat-x 0px 0px;
    color: #000000;
    text-decoration: none;
    cursor: pointer;
}

    .toggler:hover {
        border: 1px solid #333333;
        background: #999999 url('img/static/bg_tag_10x150.jpg') repeat-x 0px -50px;
        color: #eeeeee;
        text-decoration: none;
    }
    .accordion_section .open { /* Used on about page accordion with button styles */
        background: #999999 url('img/static/bg_tag_10x150.jpg') repeat-x 0px -100px;
        color: #ffffff;
    }
    .open { /* Used on all other accordions */
        color: #000000;
    }

.js_content {
    width: 342px;
    display: block;
    float: left;
}

.archive dl dd .js_content {
    width: 480px;
}

.toggle_content {
    width: 342px;
    display: block;
    float: left;
    padding: 0 4px 0 4px;
}
    .toggle_content p {
        margin: 0 0 4px 0;
        color: #333333;
        font-size: 13px;
    }

.mostRecent .textCol {
    font-size: 130%;
}
.mostRecent .textCol h3, .mostRecent .textCol a {
    font-weight: bold;
    color: #000000;
}

/* shouldn't put "js_" prefixed classes in here but we can make this an exception */
.js_toggler {
    cursor: pointer;
}


/*---------------------------------------
 * styles for creating overlay box window
 */

#mbOverlay {
    position: absolute;
    z-index: 9998;
    left: 0;
    width: 100%;
    background-color: #666666;
    cursor: pointer;
}

#mbOverlay.mbOverlayFF {
    background: transparent url('img/static/80.png') repeat;
}

#mbOverlay.mbOverlayIE {
    background: transparent url('img/static/50.gif') repeat;
}

#mbCenter {
    position: absolute;
    z-index: 9999;
    left: 50%;
    border: 10px solid #333333;
    background-color: #ffffff;
}

#mbBottomContainer {
    position: absolute;
    z-index: 9999;
    left: 50%;
    overflow: hidden;
}

.mbLoading {
    background: #333333 url('img/static/loading.gif') no-repeat center;
}

#mbImage {
    position: absolute;
    left: 0;
    top: 0;
    border: 30px solid #ffffff;
    background-repeat: no-repeat;
}

#mbBottom {
    font-family: Myriad, Verdana, Arial, Helvetica, sans-serif;
    text-align: left;
    border: 0;
    border-top-style: none;
}

#mbCloseLink, #mbPrevLink, #mbNextLink {
    display: block;
    float: right;
    height: 60px;
    width: 60px;
    margin: 0;
    outline: none;
    z-index: 12000;
    position: relative;
}

#mbCloseLink {
    float: right;
    top: -30px;
    right: -30px;
    background: transparent url('img/static/ol_close.gif') no-repeat center;
}

#mbPrevLink {
    float: left;
    top: 200px;
    left: -30px;
    background: transparent url('img/static/ol_prev.gif') no-repeat center;
}

#mbNextLink {
    float: right;
    top: 200px;
    right: -90px;
    background: transparent url('img/static/ol_next.gif') no-repeat center;
}

#mbError {
    position: relative;
    top: 30%;
    font-family: Myriad, Verdana, Arial, Helvetica, sans-serif;
    line-height: 19px;
    font-size: 12px;
    color: #fff;
    text-align: center;
    border: 10px solid #700;
    padding: 20px 10px 30px;
    margin: auto;
}


/* ------------------------------------
 * styles for content of overlay window
 */

body.overlay {
    padding: 0;
    margin: 0;
    border: 0;
    background: #ffffff none;
}

.ol_imgs {
    display: block;
    float: left;
    width: 390px;
    margin: 0 0 0 0;
    padding: 0;
}
    .ol_imgs img.thumbnail {
        display: block;
        float: left;
        margin: 0 10px 5px 0;
        border-top: 2px solid #ffffff;
        padding: 2px 0 5px 0;
        background: transparent url('img/static/ol_thumb_shadow.jpg') bottom center no-repeat;
    }

        .ol_imgs img:hover.thumbnail {
            border-top: 2px solid #666666;
        }
    
    .ol_imgs img.mainimage {
        display: none;
        float: left;
        margin: 10px 0 0 0;
        padding: 0 0 20px 0;
        background: transparent url('img/static/ol_img_shadow.jpg') bottom center no-repeat;
    }
    
    .js_thumb {
        cursor: pointer;
    }

.ol_text {
    display: block;
    float: right;
    width: 280px;
    margin: 0 0 0 0;
    font-size: 110%;
}
    .ol_text h1 {
        color: #990000;
        text-indent: 0px;
        letter-spacing: 0em;
        font: bold normal normal 18px/1.0em "Lucida Sans Unicode", "Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
    }
    
    .ol_text ul {
        margin: 10px 0 10px 0;
    }
    
    .ol_text ul li {
        margin: 0 0 2px 0;
        padding: 0;
        line-height: 1.1em;
    }
    
    .ol_text ul li span {
        font-weight: bold;
    }

.review {
    display: block;
    width: 220px;
    padding: 20px 30px 0 30px;
    margin: 0 0 5px 0;
    background: #f3e3e3;
}

p.quote    {
    font-size: 12px;
    text-align: center;
}

p.client {
    text-align: center;
    font-style: italic;
}

p.link {
    display: block;
}

    p.link a{
        display: inline-block;
        float: right;
    }

.ol_footer {
    display: block;
    float: left;
    width: 100%;
    margin: 2px 0 0 0;
    border-top: 1px solid #cccccc;
    padding: 2px 0 0 0;
}

    .ol_footer p.thisPageLink, .ol_footer p.thisPageLink a {
        color: #666666;
        font-size: 11px;
    }
    
        .ol_footer p.thisPageLink a:hover {
            color: #333333;
        }
    
/*--------------*
 * PAGINATION!
 * -------------*/

.navigation {
    margin: 10px 0 0 0;
}

    .navigation .alignleft {
        float: left;
    }

    .navigation .alignright {
        float: right;
    }
    
/*--------------*
 * 404
 * -------------*/

ul.feedlist.fourohfour {
    margin: 15px 0 0 15px;
    font: normal normal normal 14px/1.0em "Lucida Sans Unicode", "Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
}

    ul.feedlist.fourohfour li span {
        color: #990000;
        padding: 3px;
    }

    ul.feedlist.fourohfour li {
        margin: 5px 0;
    }