/* CSS styles for brush.co.nz
 */

/* === Page layout === */

body {
    _text-align: center;
    font-family: verdana, sans-serif;
    margin: 0;
    padding: 0;
    background: white;
    font-size: 80%;         /* Use a percentage to make it zoom predictably in IE6/7 */
    }

#container {
    position: relative;
    width: 885px;
    margin: auto;
    _text-align: left;
    }


#crossband {
    position: absolute;
    width: 112%;
    left: -12%;
    top: 125px;
    background: #b70000 url(images/crossband.png) no-repeat;
    background-position: 0 center;
    height: 36px;
    overflow: visible;
    }

#header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1;
    }
    #logo {
        position: absolute;
        left: 0px;
        top: 45px;
        width: 335px;
        height: 54px;
        background: url('images/logo.png');
        outline: none;
        _background: none;
        _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/logo.png');
        }
    #tagline {
        position: absolute;
        left: 0px;
        top: 99px;
        width: 335px;
        height: 13px;
        background: url('images/tagline.png');
        outline: none;
        _background: none;
        _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/tagline.png');
        }
    #sky {
        position: absolute;
        top: 0;
        right: 340px;
        z-index: -3;
        height: 138px;
        width: 100%;
        background: url(images/sky.png) repeat-x;
        }
    #rock {
        position: absolute;
        right: 0;
        _right: -1px;
        top: 0;
        z-index: -2;
        }
    #header .nav {
        position: absolute;
        left: 3.8%;
        top: 133px;
        height: 36px;
        width: 95%;
        z-index: 1;
        }
        #header .nav img {
            display: block;
            }
        #header .nav ul {
            position: relative;
            margin: 0;
            padding: 0;
            }
        #header .nav li {
            padding: 0;
            margin: 0;
            list-style-image: none;
            .background: none;
            float: left;
            position: relative;
            padding-top: 5px;
            top: -5px;
            height: 38px;
            list-style-type: none;
            margin-right: 52px;
            }
        #header .nav li.active {
            background: white;
            }
        #header .nav li a {
            display: block;
            position: relative;
            .width: 100%;
            _width: 0;
            color: white;
            }
        #header .nav li.active a {
            background: white;
            color: #b70000;
            }
        #header .nav li .leftcut {
            position: absolute;
            left: -33px;
            top: -3px;
            .top: -4px;
            height: 38px;
            width: 176px;
            background: url(images/menuitem-active.gif) no-repeat;
            z-index: -1;
            }
        #header .nav li .rightcut {
            position: absolute;
            right: -102px;
            top: -3px;
            .top: -4px;
            height: 38px;
            width: 176px;
            background: url(images/menuitem-active.gif) no-repeat;
            z-index: -1;
            }
        #header .nav .sub {
            display: none;
            position: absolute;
            top: 36px;
            left: -25px;
            width: 140px;
            background: url(images/boxes/submenu-shadow-middle.png) repeat-y;
            _background: url(images/boxes/submenu-shadow-middle-ie6.png) repeat-y;
            z-index: 1;
            }
        #header .nav .sub .menuid {
            position: relative;
            margin: 0 25px;
            top: -31px;
            z-index: 1;
            }
        #header .nav .sub ul {
            margin-bottom: -48px;
            .margin-bottom: -54px;      /* This is necessary to make sure there's no gap at the bottom left by .sub li {margin} (below) */
            margin-top: -19px;
            text-indent: 0;
            
            /* No hanging indent on multiline items in the nav submenu */
            left: 0px;
            padding-right: 0;
            }
        #header .nav .sub li {
            background: none;
            float: none;
            margin: 12px 25px;          /* If you update the vertical margins here, make sure to update .sub ul {.margin-bottom} above for IE */
            line-height: 1em;
            padding: 0;
            height: auto;
            }
        #header .nav .sub a, #header .nav .active .sub a {
            background: none;           /* So that sublist items don't overlap the shadow */
            color: #999;
            text-decoration: none;
            font-size: 1.1em;
            letter-spacing: 1px;
            font-family: "Trebuchet MS";
            font-weight: bold;
            }
        #header .nav .sub a:hover {
            text-decoration: underline;
            }
        #header .nav .sub .top {
            position: absolute;
            background: url(images/boxes/submenu-shadow-top.png);
            _background: none;
            _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/boxes/submenu-shadow-top.png');
            width: 140px;
            height: 51px;
            top: -51px;
            }
        #header .nav .sub .bottom {
            position: relative;
            background: url(images/boxes/submenu-shadow-bottom.png);
            _background: none;
            _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/boxes/submenu-shadow-bottom.png');
            width: 140px;
            height: 35px;
            bottom: -35px;
            .bottom: -42px;
            }
    #marching-blocks {
        position: absolute;
        top: -6px;
        width: 143px;
        left: 79%;
        height: 36px;
        background: url(images/marching-blocks.png) no-repeat;
        z-index: -1;
        }

#sidebar {
    position: relative;
    float: right;
    top: 180px;
    left: -10px;
    margin-bottom: 170px;
    width: 220px;
    font-size: 0.85em;
    color: #494949;
    }
    #sidebar ul {
        padding-left: 0;
        margin: 8px 0 25px 2px;
        }
    #sidebar ul.small li {
        padding-left: 0;
        .padding-left: 1em;
        font-size: 1em;
        }

    #sidebar h2 {
        color: #b70000;
        font-size: 9pt; 
        font-weight: bold;
        margin: 5px 0 10px 0;
        }
    #sidebar .redbox h2 {
        margin-top: 0px;
        color: white;
        }
    
    #sidebar .subtitle { 
        color: #797979;
        margin-bottom: 7px; 
        margin-top: -8px;
        }
    #sidebar a {}
    #sidebar .redbox a {
        color: white;
        }
    #sidebar a:hover {}
    #sidebar .box, #sidebar .redbox {
        position: relative;
        margin-top: 19px;
        margin-bottom: 48px;
        width: 154px;
        background: #f5f5f5;
        background: url(images/boxes/sidebar-white-middle.png) repeat-y;
        padding: 1px 15px 1px 20px;
        overflow: visible;
        }
    #sidebar .redbox {
        color: white;
        background: url(images/boxes/sidebar-red-middle.png) repeat-y;
        }
    #sidebar .box .bottom, #sidebar .redbox .bottom {
        position: absolute;
        bottom: -19px;
        margin-bottom: 9px;
        left: 0;
        width: 189px;
        height: 19px;
        background: white url(images/boxes/sidebar-white-bottom.png) no-repeat;
        }
    #sidebar .redbox .bottom {
        margin-bottom: 0px;
        background: white url(images/boxes/sidebar-red-bottom.png) no-repeat;
        }
    #sidebar .box .top, #sidebar .redbox .top {
        position: absolute;
        top: -19px;
        left: 0;
        width: 189px;
        height: 19px;
        background: url(images/boxes/sidebar-white-top.png) no-repeat;
        }
    #sidebar .redbox .top {
        background: url(images/boxes/sidebar-red-top.png) no-repeat;
        }


#footer {
    border-top: 6px solid #b70000;
    width: 100%;
    _text-align: center;
    font-size: 8pt;
    color: #6d6d6d;
    padding-top: 5px;
    }
    #footer .content {
        position: relative;
        min-width: 785px;
        max-width: 1024px;
        margin: auto;
        _width: 785px;
        _text-align: left;
        }
    #footer .leftcontent {
        position: absolute;
        left: 0;
        text-align: left;
        padding-bottom: 10px;
        }
    #footer .rightcontent {
        position: absolute;
        right: 0;
        text-align: right;
        padding-bottom: 10px;
        }
    #footer .info {
        letter-spacing: 1px;
        word-spacing: 2px;
        padding-right: 30px;
        }
    #footer .info .label {
        color: #8d8d8d;
        font-weight: bold;
        }
    #footer .info .first-letter {
        color: #54b800;
        }
    #footer .info a {
        color: #8d8d8d;
        text-decoration: none;
        }
    #footer .info a:hover {
        text-decoration: underline;
        }

#content {
    position: relative;
    float: left;
    padding-left: 45px;
    width: 550px;
    top: 180px;
    padding-bottom: 230px;   /* top + 60. 'margin-bottom' seems to play funny in IE6/7 */
    line-height: 130%;
    color: #494949;
    }


#content.wide {
    /* Content full width, without side banner */
    width: 885px;
    }

#contentWideInner {
    float: right;
    padding-left: 5%;
    padding-right: 7%;
    width: 62%;
    line-height: 130%;
	margin-top:30px;
    }
#sidebarWide {
    float: right;
    left: -15px;
    width: 25%;
    font-size: 0.8em;
	margin-top:30px;
    }
    #sidebarWide ul {
        padding: 0;
        }
    #sidebarWide li {
        font-weight: bold;
        }
    #sidebarWide h2 {
        font-size: 19pt;
        }


/* === Typography & text styles === */

.magnify-thumb {
    display: block;
    position: relative;
    background: url(images/boxes/portfolio-frame.png) no-repeat;
    width: 234px;
    height: 189px;
    padding: 13px 16px 26px 12px;
    cursor: pointer;
    left: -8px;
    margin-right: 13px;
    }
    .magnify-thumb .magnify {
        display: block;     /* so that we can use <span>s inside an <a> element */
        width: 37px;
        height: 37px;
        background: url(images/buttons/magnify-inactive.png) no-repeat;
        position: absolute;
        bottom: 0;
        right: -8px;
        }
    a:hover .magnify {
        background: url(images/buttons/magnify-active.png) no-repeat;
        }
        
.portfolio-item {
    float: left;
    margin-bottom: 2em;
    }
    .portfolio-item h4 {
        margin: 0;
        color: #696969;         /* A lighter grey looks slightly better on the portfolio items */
        }
    .portfolio-item .subtitle {
        margin: 0;
        color: #898989;         /* A lighter grey looks slightly better on the portfolio items */
        }
    .portfolio-item .magnify-thumb {
        top: -2px;
        }

.close {
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
    font-weight: bold;
    text-decoration: none;
    display: block;
    width: 15px;
    height: 15px;
    line-height: 14px;  /* 1px less than height, so it's vertically centered */
    text-align: center;
    border: 1px solid white;
    border-radius: 5px;
    }
    .close:hover {
        border: 1px solid #aaa;
        }

ul, ol, ul ol, ol ol, ul ul, ol ul, li {
    margin: 0;
    padding: 0;
    }

ol, ul {
    position: relative;
    padding-left: 1em;
    margin-top: 0.5em;
    margin-bottom: 1.5em;
    }

ul {
    list-style-type: none;
    list-style-image: url(images/green-bullet.png);

    /* This is all a complicated way of
     * getting bullets not to hide under a float:left element
     * and dealing with the side effects.
     */
    list-style-position: inside;        /* So that bullets don't hide under floats. */
    text-indent: -13px;                 /* Because list-style-position:inside also kills the nice hanging indents */
    left: 13px;                         /* Because if we using padding-left, it has no effect when there's a float. */
    padding-right: 13px;                /* Because left:Npx causes it to overlap the right-hand-side of the box. */

    /* Because list-style-image is rubbish in IE, we'll use background-image instead */    
    .list-style-position: outside;
    .padding-left: 2em;
    .text-indent: 0;
    .left: 0;
    .padding-right: 0;
    .list-style-image: none;
    }

ul.nobullets {
    text-indent: 0px;                 /* Don't usually want hanging indents when we don't have bullets */
    list-style-type: none;
    list-style-image: none;
    }
    ul.nobullets li {
        background-image: none;
        padding-left: 0;
        }
    ul.nobullets li.package {
        padding: 5px 5px 5px 0px;
        width: 28%;
        color: #777;
        background: #fcfcfc;
        float: left;    display: inline;
        border: 1px solid #ddd;
        _height: 10em;
        min-height: 10em;
        margin-right: 2%;
    }    
        li.package label ul {
            text-indent: 0px;                   /* No hanging indents */
            list-style-type: disc;
            list-style-image: none;

            font-size: 0.8em;
            font-weight: bold;
            margin-left: 4px;
            .margin-left: 25px;
            margin-top: 5px;
        }
        li.package label ul li {
            /* Disable bullets */
            background-image: none;
            padding-left: 0;
        }

p {
    margin-top: 0.5em;
    margin-bottom: 1.5em;
    }

li {
    _position: relative;
    padding-left: 15px;
    margin-bottom: 5px;
    line-height: 1.25em;
    
    .background-image: url(images/green-bullet.png);
    /* Weirdly, inline-block below doesn't seem to do the "inline" part. Can't figure it out, but it happens to be very convenient. */
    .display: inline-block;                 /* Seems to stop the bullet (background image) from disappearing under floats (this actually seems to work for webkit/Fx too, so maybe we could try doing all browsers with background-image) */
    .background-position: left 6px;         /* Oddly, display:inline-block causes the background image to be vertically offset, so we set this for both ul>li and ul.small>li */
    .background-repeat: no-repeat;
    }
ul.grey {
    list-style-image: url(images/grey-bullet.png);
    .list-style-image: none;
    }
    ul.grey li {
        .background-image: url(images/grey-bullet.png);
        }

ul.small li {
    font-size: 0.85em;
    margin-bottom: 10px;
    .background-position: left 6px;
    }

.endmarker {
    cursor: pointer;
    position: relative;
    .top: -3px;
    _top: 3px;
    top: 1px;
    width: 10px;
    height: 10px;
    background: url(images/green-endmarker.png) no-repeat;
    display: block;
    margin-left: auto;
    margin-right: 0;
    }

p .endmarker {
    margin-left: 3px;
    display: inline-block;
    }

pre {
    width: 100%;        /* So that too-wide text doesn't cause layout issues, eg float-clearing */
    overflow: auto;
    font-size: 1.2em;
    }

dt {
    font-weight: bold;
    margin: 0;
    }
dd {
    margin-left: 2em;
    }

a {
    color: #45a800;
    text-decoration: underline;
    }

a.quicklink {
    font-weight: bold;
    }

a:hover{
    color: #74c800;
    }

a:hover img {
    opacity: 0.75;
    filter: alpha(opacity=75);
    }    
    

h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child, p:first-child
 h1.first, h2.first, h3.first, h4.first, h5.first, h6.first, p.first {
    margin-top: 0;
    }

h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
    font-style: normal;
    line-height: 1em;
    padding: 0;
    }

h1 {
    color: #b70000;
    letter-spacing: 1px;
    font-size: 1.75em;
    line-height: 1.2000em;
    margin: 1.3371em 0 0.8914em;    /* Make sure (line-height + margin-top + margin-bottom) * font-size == integer em for all headings */
    }

h2 {
    color: #b70000;
    font-size: 1.2em;
    line-height: 1.2000em;
    margin: 1.6000em 0 0.5333em;
    }

h2 a {
    color: #b70000;
    }

h2 a:hover {
    color: #b70000;
    }

h3 {
    font-size: 1.1em;
    color: #555;
    line-height: 1.2000em;
    margin: 1.8273em 0 0.6091em;
    }
h4 {
    color: #555;
    font-size: 1em;
    line-height: 1.2000em;
    margin: 1.3500em 0 0.4500em;
    }
h5 {
    color: #555;
    font-size: 0.95em;
    line-height: 1.2000em;
    margin: 1.4684em 0 0.4895em;
    }
h6 {
    color: #555;
    font-size: 0.9em;
    line-height: 1.2000em;
    margin: 1.6000em 0 0.5333em;
    }


.subtitle {
    color: #797979;
    font-size: 0.85em;
    margin-bottom: 12px;
    margin-top: -9px;
    }

.info-message {
    border-radius: 10px;
    background: #efd;
    border: 1px solid #dec;
    color: #460;
    padding: 5px;
    margin: 1em 0 1em 0;
    }
    .info-message p {
        margin-bottom: 2px;
        margin-top: 15px;
        }
    .info-message p:first-child {               /* IE will ignore this, but it's not hugely important */
        margin-top: 2px;
        }


.two-column {
    position: relative;     /* avoid display quirks in IE6 (where the layout is sometimes a complete mess until something on the page changes) */
    display: block;
    zoom: 1;                /* force hasLayout in IE6/7 to trigger float auto-clearing */
    }
    .two-column:after {     /* auto-clear floats in other browsers */
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
        }
    .two-column div.left {
        width: 48%;         /* Don't quite fill up the whole width, so we can avoid unnecessary scrollbars in a richtext editor */
        margin: 0;          /* Reset margins & paddings, because there may be other .lefts */
        padding: 0;
        margin-right: 1%;
        float: left;
        }
    .two-column div.right {
        width: 48%;         /* Don't quite fill up the whole width, so we can avoid unnecessary scrollbars in a richtext editor */
        margin: 0;          /* Reset margins & paddings, because there may be other .rights */
        padding: 0;
        margin-left: 1%;
        float: right;
        }

.left-callout, .right-callout, .center-callout {
    margin-bottom: 2em;
    background: #f9f9f9;
    padding: 0.4em;
    border: 1px solid #bbb;
    }
    .left-callout img, .right-callout img, .center-callout img {
        display: block;
        }

.left-callout {
    float: left;
    margin-right: 2em;
    }
.right-callout {
    float: right;
    margin-left: 2em;
    }
.center-callout {
    text-align: center;
    background: none;
    border: none;
    margin: auto;
    width: 96%;                             /* Don't quite fill up the whole space, so we can avoid unecessary scrollbars in a richtext editor */
    }
    .center-callout img {
        margin: auto;
        border: 1px solid #aaa;
        }

.left-callout .caption, .right-callout .caption, .center-callout .caption {
    display: block;
    padding-top: 0.4em;
    font-size: 0.9em;
    color: #555;
    }

/* === Tables & boxes === */
  
table {
    border-collapse: collapse;
    }

th, td {
    padding: 0.2em 1em 0.2em 0;
    text-align: left;
    }

.tabcontent, .popup {
    left: -18px;
    background: url(images/boxes/popup-bg.png) repeat-y;
    }
.popup {
    display: none;
    position: absolute;
    margin-top: 15px;
    margin-left: -15px;
    width: 505px;
    padding: 10px 38px;
    z-index: 1;         /* Make sure it displays over everything */
    }
.tabcontent {
    position: relative;
    display: block;
    margin-top: 118px;
    padding: 20px 58px;
    width: 465px;
    z-index: 0;         /* Make sure it displays underneath the nav menus */
    }
    .tabcontent .content {
        display: none;
        position: relative;
        }
    .tabcontent .content-active {
        display: block;
        }
    .tabcontent h2, .popup h2 {
        position: relative;
        clear: none;
        display: block;
        margin-top: 0;
        }
    .tabcontent a.tab {
        text-decoration: none;
        }
    .tabcontent a.tab img {
        filter: none;
        opacity: 1;
        }
    .tabcontent .tab {
        position: absolute;
        margin-left: 40px;
        top: -93px;
        width: 121px;
        height: 77px;
        text-align: center;
        cursor: pointer;
        background: url(images/boxes/tab-middle-inactive.png) repeat-y;
        color: #999;
        font-size: 10px;
        line-height: 10px;
        }
        .tabcontent #electronics-tab img { _height: 85%; }     /* Electronics img makes height attribute play funny in IE6 */
    .tabcontent .tab0 { left: 0px; }
    .tabcontent .tab1 { left: 125px; }
    .tabcontent .tab2 { left: 250px; }
    .tabcontent .tab3 { left: 375px; }
    .tabcontent .tab-active {
        background: url(images/boxes/tab-middle-active.png) repeat-y;
        z-index: 1;
        }
        .tabcontent .tab .top {
            position: absolute;
            _filter: none;
            background: url(images/boxes/tab-top-inactive.png) no-repeat;
            width: 121px;
            top: -25px;
            }
        .tabcontent .tab .bottom {
            position: absolute;
            width: 121px;
            height: 26px;
            bottom: -16px;
            _bottom: -17px;
            z-index: 1;
            background: url(images/boxes/tab-bottom.png) no-repeat;
            _background: none;
            _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/boxes/tab-bottom.png');
            }
        .tabcontent .tab-active .bottom {
            _filter: none;
            background: url(images/boxes/tab-bottom-active.png) no-repeat;
            z-index: -1;
            }
        .tabcontent .tab-active .top {
            background: url(images/boxes/tab-top-active.png) no-repeat;
            }
    .tabcontent .top, .popup .top {
        position: absolute;
        top: -26px;
        left: 0;
        height: 26px;
        width: 586px;
        background: url(images/boxes/popup-top.png) no-repeat;
        _background: none;
        _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/boxes/popup-top.png');
        z-index: 0;
        }
    .tabcontent .bottom, .popup .bottom {
        position: absolute;
        bottom: -26px;
        left: 0;
        height: 26px;
        width: 586px;
        background: url(images/boxes/popup-bottom.png) no-repeat;
        _background: none;
        _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/boxes/popup-bottom.png');
        }
    .popup .close {
        right: 25px;
        top: -8px;
        }

.servicespic {
    position: relative;
    left: -3%;
    margin: auto;
    margin-top: 70px;
    margin-bottom: 20px;
    width: 348px;
    height: 85px;
    }
    .servicespic * {
        position: absolute;
        }
    .servicespic .caption {
        top: 54px;
        text-align: center;
        padding-left: 24px;
        letter-spacing: 0;
        margin-left: -30px;
        line-height: 14pt;
        }
    .servicespic a {
        text-decoration: none;
        color: #8a8a8a;
        font-size: 10pt;
        font-weight: bold;
        }
    .servicespic a:hover .caption, .servicespic a.active .caption {
        background: url(images/green-arrow-right.png) no-repeat;
        background-position: left 3px;
        color: #45a800;
        }
    #software-service {
        width: 71px;
        top: 0;
        left: 0;
        }
        #software-service img {
            top: 0;
            left: 0;
            }
    #electronics-service {
        width: 94px;
        left: 156px;
        }
        #electronics-service .caption {
            margin-left: -78px;
            }
        #electronics-service img {
            top: -5px;
            left: 0;
            }
    #web-service {
        width: 61px;
        right: 0;
        }
        #web-service .caption {
           margin-left: -14px;
            }

.clear {
    /* Using a .clear class instead of <br style='clear:both'> tends to work
     * better, because
     * 1) IE doesn't always do the right thing with br,
     * 2) br adds unwanted space,
     * 3) standards-compliant browsers won't clear
     *    if you use an inline element like <span> without specifying display:block,
     * 4) you can use this with any element type (span, div, etc), giving you
     *    more control over semantics.
     * 5) this encapsulates all the extra nitty-gritty details nicely, and
     *    lessens the need for trial-and-error each time you need to completely
     *    clear floats.
     */
    display: block;
    clear: both;
    }

.left {
    float: left;
    margin-right: 15px;
    margin-top: 15px;
    margin-bottom: 15px;
    }

.testimonial {
    position: relative;
    top: -30px;
    .top: -20px;
    left: -8px;
    color: #333;
    width: 94%;
    margin-left: 3%;
    margin-bottom: 18px;
    .margin-bottom: -20px;
    font-style: italic;
    }
    .testimonial .author {
        position: relative;
        font-style: normal;
        color: #777;
        top: -60px;
        padding-left: 10px;
        margin-top: 10px;
        margin-bottom: -80px;
        .margin-bottom: -35px;
        }
    .startquote {
        position: relative;
        left: -25px;
        font-family: "Times New Roman", serif;
        font-size: 56px;
        font-weight: bold;
        color: #ccc;
        z-index: -1;
        height: 20px;
        line-height: 1em;
        }
    .endquote {
        position: relative;
        top: -10px;
        width: 100%;
        text-align: right;
        font-family: "Times New Roman", serif;
        font-size: 56px;
        font-weight: bold;
        color: #ccc;
        z-index: -1;
        }

img {
    border: none;
    }

/* === Buttons & form elements === */

.button, button {
    font-family: inherit;
    font-size: inherit;
    display: inline;
    height: 26px;
    overflow: hidden;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
    line-height: 26px;
    padding: 0px 10px;
    text-align: center;
    margin: 5px 5px 5px 0;
    border: none;
    outline: none;
    }
.button {
    display: inline-block;
    margin-bottom: -8px;    /* Make it align vertically with inline text and normal <button>s */
    .margin-bottom: 0;      /* IE does already, although I don't think we actually asked it to */
    .position: relative;
    }
.big-button {
    height: 52px;
    line-height: 52px;
    }
button {
    /* IE6/7 doesn't play as nicely with <button>s */
    .position: relative;
    .line-height: 1em;
    .bottom: -9px;
    .background-color: white;       /* Magic! IE suddenly makes all your image-backgrounds work fine if you add a background-color property */
    }
    
/* Using CSS sprites works way better than individual images here, because
 * we don't have to specify all possible combinations of classes -- we just
 * specify an offset into an image, and it doesn't matter what image is
 * used. It also avoids using multi-class selectors, which screw up IE6
 */
.em3, button.em3 { width: 20px; background-position: 0 0px; }
.em6, button.em6 { width: 55px; background-position: 0 -26px; }
.em9, button.em9 { width: 95px; background-position: 0 -52px; }
.em12, button.em12 { width: 130px; background-position: 0 -78px; }
.em15, button.em15 { width: 170px; background-position: 0 -104px; }
.em18, button.em18 { width: 210px; background-position: 0 -130px; }

/* For some reason, the padding doesn't seem to work right on <button>s */
button.em3 { width: 40px; }
button.em6 { width: 75px; }
button.em9 { width: 115px; }
button.em12 { width: 150px; }
button.em15 { width: 190px; }
button.em18 { width: 230px; }

.primary, button.primary, .button:hover {
    background-image: url(images/buttons/normal-primary.png);
    color: #35481b;
    }
.secondary, button.secondary {
    background-image: url(images/buttons/normal-secondary.png);
    color: #4b4b4b;
    }

.big-button, .big-button:hover {
    color: white;
    font-size: 1.5em;
    background-image: url(images/buttons/normal-big.png);
    }

/* Make it look like the button is pressed.
 */
.button:active, button:active {
    padding: 0px 9px 0px 11px;
    _padding: 0 10px;   /* IE6 shifts the whole button left 10px :-S */
    }

.button.primary:hover, button.primary:hover, .big-button:hover {
    opacity: 0.70;
    color: #000000;
    }

.big-button:hover {
    color: white;
    }

.big-button:active {
    background-image: url(images/buttons/onclick-big.png);
    }

.button:active, button:active {
    background-image: url(images/buttons/onclick-primary.png);
    }

/* These 2 rules should be last, so it overrides everything else */
.disabled, button.disabled,
 .disabled:hover, button.disabled:hover,
 .disabled:active, button.disabled:active {
    background-image: url(images/buttons/disabled.png);
    color: #c7c7c7;
    }
    
/* IE6/7 just ignore these rules. Fine. */
input[type='text'] {
    width: 20em;
    }
input[type='text'], textarea {
    border: 1px solid #c7c7c7;
    }
input[type='text']:focus, textarea:focus {
    border: 1px solid #45a800;
    }

textarea {
    font-family: Verdana;
    height: 6em;
    width: 100%;
    }
    
label {
    cursor: pointer;
    }
label:hover {
    color: #45a800;
    }

.error {
    font-weight: bold;
    color: #b70000;
    }
    
#puzpic {
    float: right;
    margin-left: 15px;
    margin-bottom: 10px;
    display: block;
}
    #puzpic .caption {
        text-align: center;
        display: block;
    }
    
#toppic {
    display: block;
    margin: 10px auto;
}

.leftitem {
    margin-top: 35px;
    margin-bottom: 20px;
    clear: both;
    text-align: left;
}
    .leftitem img {
        float: right;
        margin-left: 20px;
    }

.centeritem {
    margin-top: 35px;
    margin-bottom: 20px;
    clear: both;
    text-align: center;
}
    .centeritem img {
        display: inline;
        text-align: center;
    }
    .centeritem p {
        text-align: left;
    }


.rightitem {
    margin-top: 35px;
    margin-bottom: 20px;
    clear: both;
    text-align: right;
}
    .rightitem img {
        float: left;
        margin-right: 20px;
    }
    
#baycity {

}

    #baycity div.baytext {
        position: relative;
        text-align: left;
        top: -59px;
        margin-left: 70px;
        margin-bottom: -59px;
    }
    #baycity ul {
        margin-top:12px;
        text-align: left;
    }

    #baycity .pic {
        border: none;
        width: 100%;
    }

.product {
    margin-bottom: 55px;
    .margin-bottom: 75px;
    clear: both;
    text-align: left;
}
    .product img {
        float: left;
        margin-right: 20px;
    }

#content h2 a {
    text-decoration: none;
}

#content h2 a:hover {
    text-decoration: underline;
}

.homelink {
    margin-left: 1em;
}

#places { width: 38%; }

.department {
    margin-top: 25px;
}
.department .label, .details .label {
    font-weight: bold;
}
.department p {
    padding-left: 2em;
}

#content p {
//    margin-bottom: 10px;
}

.pic {
    float: left;
    border: 1px solid black;
    margin: 0 15px 15px 0;
    outline: none;
}

.leftpic {
    float: left;
}

.rightpic {
    float: right;
}

.border {
    border: 1px solid black;
}

.noborder {
    border: none;
}

.details .label {
    font-weight: bold;
}
#address {
    float: left;
}
#map {
    float: right;
    margin-top: 30px;
}
.right-image {
    float: right;
}
#family {
    margin-left: 20px;
}
#puzpic {
    float: right;
    display: block;
    margin-bottom: 10px;
}
.caption {
    text-align: center;
    display: block;
}