/* GENERAL */

body
{
    font-size: 62.5%;
    font-family: Arial, Helvetica, sans-serif;
    color: #333;
}
strong
{
    font-weight: bold;
}
p
{
    margin-bottom: 10px;    
}
input[type="text"], textarea, select
{
    padding: 3px 4px;
    border: 1px solid #CCC;    

    border-radius: 0.3em;
    -moz-border-radius: 0.3em;
    -webkit-border-radius: 0.3em;
    border-radius: 0.3em;
    -moz-border-radius: 0.3em;
    -webkit-border-radius: 0.3em;
}
legend { display: none; }
label
{
    display: block;
    margin-bottom: 3px;
    font-weight: bold;
}

/* CLASSES */

.clear { clear: both; }
.highlight { color: #6EBEBB; }
.center { text-align: center; }
.right { text-align: right; }
.middle { vertical-align: middle; }
.hidden { display: none; }
.separator
{
    border-bottom: 1px dotted #DDD;
    margin-bottom: 15px;
    padding-top: 15px;
}
.msg
{
    margin-bottom: 20px;
    padding: 3px 5px;
    text-align: center;
    border-style: solid;
    border-width: 1px;
    font-weight: bold;    
}
.success
{
    border-color: #4B8A26;
    color: #4B8A26;
    background: #E5FFD5;
}
.pagination
{
    margin-top: 15px;
    text-align: right;
}
    .pagination li
    {
        display: inline;
        margin: 0 2px;
        padding: 2px 5px;
        color: #FFF;
        background-color: #CCC;
    }
        .pagination li.current { font-weight: bold; background-color: #BBB; }
        .pagination li a { color: #FFF; }

/* LAYOUT */

#top
{
    position: relative;
    width: 960px; height: 100px;
    margin: 0 auto;
}
    #logo
    {
        position: absolute;
        width: 145px; height: 46px;
        top: 25px; left: 30px;
        text-indent: -9999px;
        background: url(../img/logo.png) no-repeat top left;
        cursor: pointer;
    }
    #switch
    {
        position: absolute;
        width: 350px;
        top: 29px; left: 200px;
        overflow: auto;
    }
        .switch-left
        {
            float: left;
            padding: 10px 15px 12px 0;
            border-right: 1px solid #EEE;
            text-align: right;
        }
        .switch-right
        {
            float: left;
            padding: 10px 0 12px 15px;
        }
    #nav_top
    {
        position: absolute;
        width: 100%; height: 25px;
        bottom: 0; right: 0;
    }
        #nav_top li.root
        {
            position: relative;
            display: block;
            float: right;
            width: 95px; height: 20px;
            margin-right: 3px;
            padding-top: 5px;
            background: url(../img/navtab.png) no-repeat;
            text-align: center;
        }
            #nav_top li.root.active
            {
                background: url(../img/navtab_active.png) no-repeat;
            }
            #nav_top li.root ul
            {
                display: none;
                position: absolute;
                top: 25px; left: 0;
                width: 130px;
            }
                #nav_top li.root ul li
                {
                    padding: 4px 5px 5px 5px;
                    background: #FFF;                    
                    border-top: 1px solid #DDD;
                }
    #search
    {
        position: absolute;
        top: 32px; right: 0;
    }
#ribbon
{
    position: relative;
    width: 100%; height: 110px;
    margin-bottom: 20px;
    border-top: 1px solid #DDD;
    border-bottom: 1px solid #DDD;
    background: #F3F3F3 url(../img/ribbon.jpg) no-repeat top center;
}
    #slogan
    {
        position: absolute;
        top: 45px; left: 320px;
        width: 310px; height: 37px;
        background: url(../img/slogan.png) no-repeat;
    }
#middle
{
    width: 960px;
    margin: 0 auto;
}
    #sidebar
    {
        float: left;
        width: 200px;
        margin-right: 30px;
    }
    #main
    {
        float: left;
        width: 730px;
        *overflow: hidden; // ie6 hack
        *height: 1%; // ie6 hack
    }
#bottom
{
    position: relative;
    width: 960px;
    margin: 0 auto;
    padding: 10px 0;
    border: 1px solid #DADADA;
    text-align: center;

    border-top-left-radius: 1em;
    -moz-border-radius-topleft: 1em;
    -webkit-border-top-left-radius: 1em;
    border-bottom-right-radius: 1em;
    -moz-border-radius-bottomright: 1em;
    -webkit-border-bottom-right-radius: 1em;
}
    #nav_bottom
    {
        margin-bottom: 5px;
    }
        #nav_bottom li
        {
            display: inline;
            padding: 0 5px;
        }
    #bbq
    {
        position: absolute;
        bottom: 10px; right: 10px;
    }
#bottom_spacer { height: 20px; }

/*****/

.product_cell
{
    float: left;
    width: 317px;
    margin-top: 15px;
    margin-right: 10px;
    padding: 0 10px;    
    border-left: 2px solid #EEE;
}
    .product_cell .pic
    {
        float: left;
        width: 80px; height: 76px;
        margin-right: 10px;
        padding: 2px 0;
        border: solid #DDD 1px;
        text-align: center;
    }
    .product_cell .details
    {
        float: left;
        width: 225px; height: 82px;
        overflow: hidden;
    }
        .product_cell .details h2
        {
            margin-bottom: 4px;
        }

    .no_top_margin { margin-top: 0; }

.catalog_cell
{
    float: left;
    width: 200px;
    margin-right: 10px;
    padding: 0 10px;
    border-left: 2px solid #EEE;
}
    .catalog_clear
    {
        clear: both;
        height: 15px;
    }
    .catalog_cell h2
    {
        margin-bottom: 4px;
    }
    .catalog_cell li
    {
        margin-bottom: 2px;
    }
    .catalog_cell .right
    {
        margin-top: 5px;
    }

#product {}    
    #product .pics
    {
        float: left;
        margin-right: 15px;
    }
        #product .pics .main_pic
        {
            width: 220px; height: 200px;
            padding: 10px 0;
            border: 1px solid #DDD;
            text-align: center;            

            border-top-left-radius: 1em;
            -moz-border-radius-topleft: 1em;
            -webkit-border-top-left-radius: 1em;
            border-bottom-right-radius: 1em;
            -moz-border-radius-bottomright: 1em;
            -webkit-border-bottom-right-radius: 1em;
        }
    #product .details
    {
        float: left;
        width: 461px;
    }
        #product .details .desc
        {
            overflow: hidden;
            height: 1%;
        }
        #product .details .doc
        {
            float: right;
            padding: 10px;
            margin: 3px 0 0 5px;
            text-align: center;
            background-color: #F7F7F7;
            border: 1px solid #CCC;
            
            border-radius: 0.3em;
            -moz-border-radius: 0.3em;
            -webkit-border-radius: 0.3em;
            border-radius: 0.3em;
            -moz-border-radius: 0.3em;
            -webkit-border-radius: 0.3em;
        }
        #product .details tr.r0 { background-color: #EEE; }
        #product .details tr.r1 { background-color: #F5F5F5; }
        #product .details td { padding: 3px 4px; }
        #product .details td.label { padding-right: 30px; font-weight: bold; }

    #product .wrapper
    {
        width: 222px;
    }
    #product .other
    {
        margin: 15px auto 0 auto;
    }
        #product .other .prevPage,
        #product .other .nextPage
        {
            float: left;
            width: 9px; height: 9px;
            margin-top: 25px;
            cursor: pointer;
        }
        #product .other .prevPage { background: url(../img/prev.gif) no-repeat; margin-right: 3px; }
        #product .other .nextPage { background: url(../img/next.gif) no-repeat; margin-left: 3px; }
        #product .other .pp .disabled { background: url(../img/prev_inactive.gif) no-repeat; cursor: default; }
        #product .other .np .disabled { background: url(../img/next_inactive.gif) no-repeat; cursor: default; }
        #product .other .scrollable
        {
            float: left;
            width: 198px; height: 62px;
            position: relative;
            overflow: hidden;
        }
            #product .other .scrollable .items {
                width: 20000em;
                position: absolute;
            }
            #product .other .scrollable .items div
            {
                float: left;
                width: 60px; height: 56px;
                margin: 0 2px;
                padding: 2px 0;
                border: 1px solid #DDD;
                text-align: center;
            }
                #product .other .scrollable .items div.active
                {
                    border-color: #4B8A26;
                }

    .product-back { position: absolute; top: 10px; right: 10px; }
    .nav-left { float: left; width: 200px; margin-top: 15px; }
    .nav-right { float: right; width: 200px; margin-top: 15px; text-align: right; }

    .editor-formatting ul,
    .editor-formatting ol,
    .editor-formatting table
    {
        margin-bottom: 10px;
    }
    .editor-formatting ol li
    {
        list-style-position: inside;
        list-style-type: decimal;
        margin-left: 13px;
    }
    .editor-formatting ul li
    {
        list-style-position: inside;
        list-style-type: disc;
        margin-left: 14px;
    }
    .editor-formatting table
    {
        margin-left: 1px;
    }
        .editor-formatting table td
        {
            padding: 3px 4px;
        }

.root-categories li
{
    list-style-image: url(../img/arrow-right_tiny-green.gif);
    margin-left: 10px;
    margin-bottom: 3px;
}

.partners
{
    width: 100%;
}
    .partners td
    {
        width: 50%;
        padding: 0 2px 10px 2px;
        text-align: center;
        vertical-align: middle;
    }

.partner img
{
    padding: 10px;    
}

/* TYPOGRAPHY */

.heading h1,
.heading h2
{
    color: #4B8A26;
    font-size: 1.6em;
    font-weight: bold;    
}
.catalog_cell h2
{    
    font-size: 1.333em;
}
#switch
{
    color: #6EBEBB;
    font-size: 1.4em;
    text-transform: uppercase;
}
#nav_top,
#main .content,
#sidebar .content,
#search,
.product-back
{
    font-size: 1.2em;
}
#bottom
{
    color: #666;
    font-size: 1.1em;    
}

/* LINKS */

.heading h1 a { color: #4B8A26; }
    .heading h1 a:hover { text-decoration: none; }
    .heading h1 a.current { color: #6EBEBB; text-decoration: none; }

#nav_top a { color: #000; text-decoration: none; }    
    #nav_top a.root:hover { text-decoration: underline; }
    #nav_top li.active a { color: #FFF; }
    #nav_top li.hover { cursor: pointer; }
    #nav_top li.hover a { text-decoration: underline; }

#nav_top li.root ul a { color: #000; text-decoration: none; }
    #nav_top li.root ul a:hover { text-decoration: underline; }
    #nav_top li.root ul li.hover { cursor: pointer; }
    #nav_top li.root ul li.hover a { text-decoration: underline; }

#switch a { color: #000; text-decoration: none; }
    #switch a:hover { text-decoration: underline; }

#sidebar a { color: #6EBEBB; }
    #sidebar a:hover  { text-decoration: none; }
    
#search a { color: #999; }
    #search a:hover { text-decoration: none; }

#bottom a { color: #666; }
    #bottom a:hover { text-decoration: none; }

.catalog_cell a { color: #6EBEBB; }
    .catalog_cell a:hover { text-decoration: none; }
.catalog_cell li a { color: #666; }
    .catalog_cell li a:hover { text-decoration: none; }

.product_cell a { color: #6EBEBB; }
    .product_cell a:hover { text-decoration: none; }

.product-back a, .nav-left a, .nav-right a { color: #4B8A26 !important; }
    .product-back a:hover, .nav-left a:hover, .nav-right a:hover { text-decoration: none; }

#product .details a { color: #4B8A26; }
    #product .details a:hover { text-decoration: none; }

#product .details .doc a { color: #4B8A26; }
    #product .details .doc a:hover { text-decoration: none; }
    
.content a { color: #6EBEBB; }
    .content a:hover { text-decoration: none; }

.root-categories a { color: #666 !important; }
    .root-categories a:hover { text-decoration: none; }
    .root-categories a.active { font-weight: bold; }

/* BOX */

.box
{
    border: 1px solid #DADADA;
    margin-bottom: 20px;

    border-top-left-radius: 1em;
    -moz-border-radius-topleft: 1em;
    -webkit-border-top-left-radius: 1em;
    border-bottom-right-radius: 1em;
    -moz-border-radius-bottomright: 1em;
    -webkit-border-bottom-right-radius: 1em;
}
    .heading
    {
        position: relative;
        height: 50px;
        margin-bottom: 3px;
    }
        .heading h1,
        .heading h2
        {
            position: absolute;
            top: 9px; left: 65px;
        }
        .heading .icon
        {
            position: absolute;
            top: -8px; left: 5px;
            width: 62px; height: 55px;
            background-repeat: no-repeat;
        }
    .content
    {
        margin: 0 15px 15px 15px;
    }        

/* BUTTON */

.btn
{
    display: inline-block;
    background: none;
    margin: 0;
    padding: 3px 0;
    border-width: 0;
    overflow: visible;    
    line-height: 1.2;
    text-decoration: none;
    color: #FFF !important;
}
* html button.btn
{
    padding-bottom: 1px;
}
html:not([lang*=""]) button.btn {
    margin: 0 -3px;
}
.btn span {
    background: #4B8A26 url(../img/bg-button.gif) repeat-x 0 0;
    margin: 0;
    padding: 3px 0;
    border-left: 1px solid #70D43A;
    border-right: 1px solid #70D43A;
}
* html .btn span
{
    padding-top: 0;
}
.btn span span
{
    position: relative;
    padding: 3px .4em;
    *padding-top: 2px;
    border-width: 0;
    border-top: 1px solid #70D43A;
    border-bottom: 1px solid #70D43A;
}
/* button states: hover/focus/active */
.btn:hover { cursor: pointer; }
.btn:hover span, .btn:hover span span, .btn:focus span, .btn:focus span span
{
    cursor: pointer;
    border-color: #7DED40 !important;
    color: #FFF;
}
.btn:active span {
    background-position: 0 -400px;
    outline: none;
}
.btn:focus, .btn:active {
    outline: none; /* doesn't seem to be respected for <button>, only <a> */
}
/* use if one button should be the 'primary' button */
.primary
{
    font-weight: bold;
    color: #FFF;
}