themes/multiflex/webapp/multiflex/style.css

/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

* {
    padding: 0;
    margin: 0;
}

body {
    text-align: center;
    font-size: 62.5%;
    background-color: #FFFFFF;
    font-family: verdana, arial, sans-serif;
}

/*Font-size: 1.0em = 10px when browser default size is 16px*/

.page-container {
    text-align: left;
    width: 900px;
    margin: 0px auto;
    margin-top: 10px;
    margin-bottom: 10px;
    border: solid 1px #969696;
    font-size: 1.0em;
}

#ecom-mainarea {
    clear: both;
    width: 900px;
    padding-bottom: 30px;
    background: transparent url(/multiflex/bg_main_withnav.jpg) top left repeat-y;
}

.left {
    display: inline /*Fix IE floating margin bug*/;
    float: left;
    width: 200px;
    overflow: visible !important /*Firefox*/;
    overflow: hidden /*IE6*/;
}

.center {
    display: inline;
    /*Fix IE floating margin bug*/;
    float: left;
    width: 470px;
    margin: 0 0 0 15px;
    overflow: visible !important /*Firefox*/;
    overflow: hidden /*IE6*/;
}

.right {
    display: inline /*Fix IE floating margin bug*/;
    float: right;
    width: 185px;
    margin: 0 15px 0 0;
    overflow: visible !important /*Firefox*/;
    overflow: hidden /*IE6*/;
}

.footer {
    clear: both;
    width: 900px;
    padding: 1.0em 0 1.0em 0;
    background: rgb(225, 225, 225) url(/multiflex/bg_foot.jpg) no-repeat;
    font-size: 1.0em;
    overflow: visible !important /*Firefox*/;
    overflow: hidden /*IE6*/;
}

/* HEADER */
.header {
    width: 900px;
    font-family: "trebuchet ms", arial, sans-serif;
}

.header-top {
    width: 900px;
    height: 80px;
    background: #F0F0F0 url(/multiflex/bg_head_top.jpg);
    overflow: visible !important /*Firefox*/;
    overflow: hidden /*IE6*/;
}

.header-middle {
    width: 900px;
    height: 150px;
    background: #E6E6E6 url(/multiflex/bg_head_middle.jpg);
    overflow: visible !important /*Firefox*/;
    overflow: hidden /*IE6*/;
}

.header-middle .sitemessage h2 a {
    background: none;
    border: none;
}

.header-bottom {
    width: 900px;
    height: 40px;
    background: #FFFFFF url(/multiflex/bg_head_breadcrumbs.jpg) repeat-y;
}

.header-breadcrumbs {
    clear: both;
    width: 900px;
    height: 10px;
    padding: 1.0em 0 1.0em 0;
    background: #FFFFFF url(/multiflex/bg_head_breadcrumbs.jpg) repeat-y;
}

.sitelogo {
    width: 90px;
    height: 58px;
    position: absolute;
    z-index: 1;
    margin: 10px 0 0 20px;
    background: url(/multiflex/ofbizLogo.gif);
}

.sitename {
    width: 400px;
    height: 45px;
    position: absolute;
    z-index: 1;
    margin: 20px 0 0 130px;
    overflow: visible !important /*Firefox*/;
    overflow: hidden /*IE6*/;
}

.sitename h1 {
    font-size: 240%;
}

.sitename h2 {
    margin: -4px 0 0 0;
    color: #7D7D7D;
    font-size: 120%;
}

.sitename a {
    text-decoration: none;
    color: #7D7D7D;
}

.sitename a:hover {
    text-decoration: none;
    color: #323232;
}

.microcart {
    width: 400px;
    height: 45px;
    position: absolute;
    z-index: 1;
    margin: 20px 0 0 600px;
    overflow: visible !important /*Firefox*/;
    overflow: hidden /*IE6*/;
}

.nav0 {
    width: 350px;
    position: absolute;
    z-index: 2;
    margin: 25px 0 0 0;
    margin-left: 550px !important /*Non-IE6*/;
    margin-left: 553px /*IE6*/;
}

.nav0 ul {
    float: right;
    padding: 0 20px 0 0;
}

.nav0 li {
    display: inline;
    list-style: none;
}

.nav0 li a {
    padding: 0 0 0 3px;
}

.nav0 a:hover {
    text-decoration: none;
}

.nav0 a img {
    height: 14px;
    border: none;
}

.nav1 {
    width: 350px;
    position: absolute;
    z-index: 3;
    margin: 45px 0 0 550px;
}

.nav1 ul {
    float: right;
    padding: 0 15px 0 0;
    font-weight: bold;
}

.nav1 li {
    display: inline;
    list-style: none;
}

.nav1 li a {
    display: block;
    float: left;
    padding: 2px 5px 2px 5px;
    color: #7D7D7D;
    text-decoration: none;
    font-size: 120%;
}

.nav1 a:hover {
    text-decoration: none;
    color: #323232;
}

.sitemessage {
    width: 400px;
    height: 120px;
    position: absolute;
    z-index: 1;
    margin: 20px 0 0 480px;
    color: rgb(234, 239, 247);
    /*overflow:visible !important /*Activate if Firefox print problems*/
    overflow: hidden /*IE6*/;
}

.sitemessage h1 {
    width: 400px;
    text-align: right;
    font-size: 230%;
}

.sitemessage h2 {
    float: right;
    width: 320px;
    margin: 8px 0 0 0;
    text-align: right;
    line-height: 100%;
    font-size: 160%;
}

.sitemessage h3 {
    float: right;
    width: 320px;
    margin: 10px 0 0 0;
    text-align: right;
    font-size: 140%;
}

.sitemessage h3 a {
    text-decoration: none;
    color: rgb(234, 239, 247);
}

.sitemessage h3 a:hover {
    text-decoration: none;
    color: rgb(50, 50, 50);
}

/*Drop-down menu*/
.nav2 {
    float: left;
    width: 900px;
    border: none;
    background: #DCDCDC url(/multiflex/bg_head_bottom_nav.jpg) no-repeat;
    color: #4B4B4B;
    font-size: 130%;
}

/*Color navigation bar normal mode*/
.nav2 ul {
    list-style-type: none;
}

.nav2 ul li {
    float: left;
    position: relative;
    z-index: auto !important /*Non-IE6*/;
    z-index: 1000 /*IE6*/;
    border-right: solid 1px #AFAFAF;
}

.nav2 ul li a {
    float: none !important /*Non-IE6*/;
    float: left /*IE-6*/;
    display: block;
    height: 3.1em;
    line-height: 3.1em;
    padding: 0 16px 0 16px;
    text-decoration: none;
    font-weight: bold;
    color: #646464;
}

.nav2 ul li ul {
    display: none;
    border: none;
}

/*Non-IE6 hovering*/
.nav2 ul li:hover a {
    background-color: #D2D2D2;
    text-decoration: none;
}

/*Color main cells hovering mode*/
.nav2 ul li:hover ul {
    display: block;
    width: 10.0em;
    position: absolute;
    z-index: 999;
    top: 3.0em;
    margin-top: 0.1em;
    left: 0;
}

.nav2 ul li:hover ul li a {
    display: block;
    width: 10.0em;
    height: auto;
    line-height: 1.3em;
    margin-left: -1px;
    padding: 4px 16px 4px 16px;
    border-left: solid 1px #AFAFAF;
    border-bottom: solid 1px #AFAFAF;
    background-color: #EDEDED;
    font-weight: normal;
    color: #323232;
}

/*Color subcells normal mode*/
.nav2 ul li:hover ul li a:hover {
    background-color: #D2D2D2;
    text-decoration: none;
}

/*Color subcells hovering mode*/

/*IE6 hovering*/
.nav2 table {
    position: absolute;
    top: 0;
    left: 0;
    border-collapse: collapse;
}

.nav2 ul li a:hover {
    background-color: #D2D2D2;
    text-decoration: none;
}

/*Color main cells hovering mode*/
.nav2 ul li a:hover ul {
    display: block;
    width: 10.0em;
    position: absolute;
    z-index: 999;
    top: 3.1em;
    t\op: 3.0em;
    left: 0;
    marg\in-top: 0.1em;
}

.nav2 ul li a:hover ul li a {
    display: block;
    w\idth: 10.0em;
    height: 1px;
    line-height: 1.3em;
    padding: 4px 16px 4px 16px;
    border-left: solid 1px #AFAFAF;
    border-bottom: solid 1px #AFAFAF;
    background-color: #EDEDED;
    font-weight: normal;
    color: #323232;
}

/*Color subcells normal mode*/
.nav2 ul li a:hover ul li a:hover {
    background-color: #D2D2D2;
    text-decoration: none;
}

/*Color subcells hovering mode*/
.center .breadcrumbs ul {
    float: left;
    width: 560px;
    list-style: none;
    padding: 0 0 0 15px;
    font-family: verdana, arial, sans-serif;
}

.center .breadcrumbs ul li {
    display: inline;
    padding: 0 0 0 10px;
    background: transparent url(/multiflex/bg_bullet_arrow.gif) no-repeat 0 50%;
    font-weight: bold;
    color: #7D7D7D;
    font-size: 100%;
}

.center .breadcrumbs ul a {
    color: #467AA7;
    text-decoration: none;
}

.center .breadcrumbs ul a:hover {
    color: #2A5A8A;
    text-decoration: underline;
}

/********************/
/*  COMMON CLASSES  */
/********************/
#ecom-mainarea img {
    clear: both;
    float: left;
    margin: 3px 10px 7px 0;
    padding: 1px;
    border: 1px solid rgb(150, 150, 150);
}

#ecom-mainarea img.center {
    clear: both;
    float: none;
    display: block;
    margin: 0 auto;
    padding: 1px;
    border: 1px solid rgb(150, 150, 150);
}

#ecom-mainarea img.right {
    clear: both;
    float: right;
    margin: 3px 0 7px 10px;
    padding: 1px;
    border: 1px solid rgb(150, 150, 150);
}

#ecom-mainarea a {
    color: rgb(70, 122, 167);
    font-weight: bold;
    text-decoration: none;
}

.center h1 a {
    color: rgb(70, 122, 167);
    font-weight: normal;
    text-decoration: none;
}

#ecom-mainarea a:hover {
    color: rgb(42, 90, 138);
    text-decoration: underline;
}

#ecom-mainarea a:visited {
    color: rgb(42, 90, 138);
}

#ecom-mainarea a img {
    border: solid 1px rgb(150, 150, 150);
}

#ecom-mainarea a:hover img {
    border: solid 1px rgb(220, 220, 220);
}

.nocolumns {
    w_idth: 900px;
    width: 870px;
    padding: 0 1em 0 1em;
    background: #FFFFFF url(/multiflex/bg_head_breadcrumbs.jpg) repeat-y;
}

/******************/
/*  MAIN SECTION  */
/******************/

/* MAIN NAVIGATION */
.left .round-border-topright {
    width: 10px;
    height: 10px;
    position: absolute;
    z-index: 100;
    margin: 0 0 0 190px;
    background: url(/multiflex/bg_corner_topright.gif) no-repeat;
}

/* MAIN CONTENT */
.column1-unit {
    width: 440px;
    margin-bottom: 10px !important /*Non-IE6*/;
    margin-bottom: 5px /*IE6*/;
}

.column2-unit-left {
    float: left;
    width: 200px;
    margin-bottom: 10px !important /*Non-IE6*/;
    margin-bottom: 5px /*IE6*/;
}

.column2-unit-right {
    float: right;
    width: 200px;
    margin-bottom: 10px !important /*Non-IE6*/;
    margin-bottom: 5px /*IE6*/;
}

.column3-unit-left {
    float: left;
    width: 120px;
    margin-bottom: 10px !important /*Non-IE6*/;
    margin-bottom: 5px /*IE6*/;
}

.column3-unit-middle {
    float: left;
    width: 120px;
    margin-bottom: 10px !important /*Non-IE6*/;
    margin-bottom: 5px /*IE6*/;
    margin-left: 40px;
}

.column3-unit-right {
    float: right;
    width: 120px;
    margin-bottom: 10px !important /*Non-IE6*/;
    margin-bottom: 5px /*IE6*/;
}

/* MAIN SUBCONTENT */
.subcontent-unit-border {
    width: 183px;
    margin: 0 0 2.0em 0;
    padding: 0 0 5px 0;
    border: solid 1px rgb(190, 190, 190);
    background: rgb(235, 235, 235);
}

.right .screenlet {
    width: 183px;
    margin: 0 0 2.0em 0;
    padding: 0 0 5px 0;
    border: solid 1px rgb(190, 190, 190);
    background: rgb(235, 235, 235);
}

.subcontent-unit-border-green {
    width: 183px;
    margin: 0 0 2.5em 0;
    padding: 0 0 10px 0;
    border: solid 1px rgb(160, 214, 81);
    background-color: rgb(217, 239, 185);
}

.subcontent-unit-border-blue {
    width: 183px;
    margin: 0 0 2.5em 0;
    padding: 0 0 10px 0;
    border: solid 1px rgb(137, 170, 214);
    background-color: rgb(213, 225, 240);
}

.subcontent-unit-border-orange {
    width: 183px;
    margin: 0 0 2.5em 0px;
    padding: 0 0 10px 0;
    border: solid 1px rgb(232, 177, 13);
    background-color: rgb(248, 224, 150);
}

.subcontent-unit-noborder {
    width: 185px;
    margin: 0 0 2.5em 0;
    padding: 0 0 10px 0;
    background: rgb(235, 235, 235);
}

.subcontent-unit-noborder-green {
    width: 185px;
    margin: 0 0 2.5em 0;
    padding: 0 0 10px 0;
    background-color: rgb(217, 239, 185);
}

.subcontent-unit-noborder-blue {
    width: 185px;
    margin: 0 0 2.5em 0;
    padding: 0 0 10px 0;
    background-color: rgb(213, 225, 240);
}

.subcontent-unit-noborder-orange {
    width: 185px;
    margin: 0 0 2.5em 0;
    padding: 0 0 10px 0;
    background-color: rgb(248, 224, 150);
}

.round-border-topleft {
    width: 10px;
    height: 10px;
    position: absolute;
    z-index: 100;
    background: url(/multiflex/bg_corner_topleft.gif) no-repeat;
    margin-top: -1px;
    margin-left: -1px;
}

.round-border-topright {
    width: 10px;
    height: 10px;
    position: absolute;
    z-index: 100;
    background: url(/multiflex/bg_corner_topright.gif) no-repeat;
    margin-top: -1px;
    margin-left: 174px;
}

.round-noborder-topleft {
    width: 10px;
    height: 10px;
    position: absolute;
    z-index: 100;
    background: url(/multiflex/bg_corner_topleft.gif) no-repeat;
    margin-top: 0px;
    margin-left: 0px;
}

.round-noborder-topright {
    width: 10px;
    height: 10px;
    position: absolute;
    z-index: 100;
    background: url(/multiflex/bg_corner_topright.gif) no-repeat;
    margin-top: 0px;
    margin-left: 175px;
}

/********************/
/*  FOOTER SECTION  */
/********************/
.footer p {
    line-height: 1.3em;
    text-align: center;
    color: rgb(125, 125, 125);
    font-weight: bold;
    font-size: 110%;
}

.footer p.credits {
    font-weight: normal;
}

.footer a {
    text-decoration: underline;
    color: rgb(125, 125, 125);
}

.footer a:hover {
    text-decoration: none;
    color: rgb(0, 0, 0);
}

.footer a:visited {
    color: rgb(0, 0, 0);
}

/******************/
/*  CLEAR FLOATS  */
/******************/
.page-container:after,
.header:after,
.breadcrumbs:after,
#ecom-mainarea:after,
.left:after,
.center:after,
.center div:after,
.right:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.column1-unit:after,
.column2-unit-left:after,
.column2-unit-right:after,
.column3-unit-left:after,
.column3-unit-middle:after,
.column3-unit-right:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.subcontent-unit-border:after,
.subcontent-unit-noborder:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.subcontent-unit-border-blue:after,
.subcontent-unit-border-green:after,
.subcontent-unit-border-orange:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.subcontent-unit-noborder-blue:after,
.subcontent-unit-noborder-green:after,
.subcontent-unit-noborder-orange:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.footer:after,
p:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clear-contentunit {
    clear: both;
    width: 440px;
    height: 0.1em;
    border: none;
    background: rgb(210, 210, 210);
    color: rgb(210, 210, 210);
}

/********************************/
/*  PRINTING and MISCELLANEOUS  */
/********************************/
@media print {
    .header-top {
        width: 900px;
        height: 80px;
        background: rgb(240, 240, 240);
        overflow: visible !important /*Firefox*/;
        overflow: hidden /*IE6*/;
    }
}

@media print {
    .breadcrumbs {
        width: 900px;
        background: transparent;
    }
}

@media print {
    .nav2 {
        float: left;
        width: 900px;
        border: none;
        background: rgb(240, 240, 240);
        color: rgb(75, 75, 75);
        font-size: 1.0em;
        font-size: 130%;
    }
}

/*Color navigation bar normal mode*/

@media print {
    #ecom-mainarea {
        clear: both;
        width: 900px;
        padding-bottom: 30px;
        background: transparent;
    }
}

@media print {
    .left {
        display: inline /*Fix IE floating margin bug*/;
        float: left;
        width: 199px;
        border-right: solid 1px rgb(200, 200, 200);
        border-bottom: solid 1px rgb(200, 200, 200);
        background-color: rgb(240, 240, 240);
        overflow: visible !important /*Firefox*/;
        overflow: hidden /*IE*/;
    }
}

@media print {
    .footer {
        clear: both;
        width: 900px;
        height: 3.7em;
        padding: 1.1em 0 0;
        background: rgb(240, 240, 240);
        font-size: 1.0em;
        overflow: visible !important /*Firefox*/;
        overflow: hidden /*IE6*/;
    }
}

/******************/
/*  MAIN SECTION  */
/******************/

/* MAIN NAVIGATION */
.nav3-grid {
    width: 199px;
    border-bottom: solid 1px rgb(200, 200, 200);
}

.nav3-grid dt a,
.nav3-grid dt a:visited {
    display: block;
    min-height: 2.0em /*Non-IE6*/;
    height: auto !important;
    height: 2.0em /*IE6*/;
    line-height: 2.0em;
    padding: 0px 10px 0px 20px;
    border-top: solid 1px rgb(200, 200, 200);
    text-decoration: none;
    color: rgb(70, 122, 167);
    font-weight: bold;
    font-size: 120%;
}

.nav3-grid dd a,
.nav3-grid dd a:visited {
    display: block;
    min-height: 1.7em /*Non-IE6*/;
    height: auto !important;
    height: 1.7em /*IE6*/;
    line-height: 1.7em;
    padding: 0px 10px 0px 40px;
    border: none;
    font-weight: normal;
    text-decoration: none;
    color: rgb(70, 122, 167);
    font-size: 120%;
}

.nav3-grid dt a:hover,
.nav3-grid dd a:hover {
    background-color: rgb(225, 225, 225);
    color: rgb(42, 90, 138);
    text-decoration: none;
}

.nav3-bullet {
    width: 170px;
    margin: 10px 0 0 20px;
}

.nav3-bullet dt a,
.nav3-bullet dt a:visited {
    line-height: 2.0em;
    padding: 0 0 0 10px;
    background: url(/multiflex/bg_bullet_full_1.gif) no-repeat 0px 50%;
    text-decoration: none;
    color: rgb(70, 122, 167);
    font-weight: bold;
    font-size: 120%;
}

.nav3-bullet dd a,
.nav3-bullet dd a:visited {
    line-height: 1.7em;
    margin: 0 0 0 15px;
    padding: 0 0 0 10px;
    background: url(/multiflex/bg_bullet_half_1.gif) no-repeat 0px 50%;
    text-decoration: none;
    color: rgb(70, 122, 167);
    font-weight: normal;
    font-size: 120%;
}

.nav3-bullet dt a:hover {
    background: url(/multiflex/bg_bullet_full_2.gif) no-repeat 0px 50%;
    text-decoration: underline;
    color: rgb(42, 90, 138);
}

.nav3-bullet dd a:hover {
    background: url(/multiflex/bg_bullet_half_2.gif) no-repeat 0px 50%;
    text-decoration: underline;
    color: rgb(42, 90, 138);
}

.nav3-nobullet {
    width: 170px;
    margin: 10px 0 0 20px;
}

.nav3-nobullet dt a,
.nav3-nobullet dt a:visited {
    line-height: 2.0em;
    text-decoration: none;
    color: rgb(70, 122, 167);
    font-weight: bold;
    font-size: 120%;
}

.nav3-nobullet dd a,
.nav3-nobullet dd a:visited {
    line-height: 1.7em;
    margin: 0 0 0 15px;
    text-decoration: none;
    color: rgb(70, 122, 167);
    font-weight: normal;
    font-size: 120%;
}

.nav3-nobullet dt a:hover,
.nav3-nobullet dd a:hover {
    text-decoration: underline;
    color: rgb(42, 90, 138);
}

.left h1.first {
    clear: both;
    margin: 0px;
    padding: 4px 20px 3px 20px;
    background-color: rgb(190, 190, 190);
    font-family: "trebuchet ms", arial, sans-serif;
    color: rgb(255, 255, 255);
    font-weight: bold;
    font-size: 150%;
}

.left .first .screenlet-title-bar {
    clear: both;
    margin: 0px;
    padding: 4px 20px 3px 20px;
    background-color: rgb(190, 190, 190);
    font-family: "trebuchet ms", arial, sans-serif;
    color: rgb(255, 255, 255);
    font-weight: bold;
    font-size: 150%;
}

.nocolumns .screenlet-title-bar,
.rightonly .screenlet-title-bar,
.leftonly .screenlet-title-bar {
    c_lear: both;
    margin: 0px;
    padding: 4px 20px 3px 20px;
    background-color: rgb(190, 190, 190);
    font-family: "trebuchet ms", arial, sans-serif;
    color: rgb(255, 255, 255);
    font-weight: bold;
    font-size: 150%;
}

.left h1 {
    clear: both;
    margin: 30px 0 20px 0;
    padding: 4px 20px 3px 20px;
    background: rgb(190, 190, 190);
    font-family: "trebuchet ms", arial, sans-serif;
    color: rgb(255, 255, 255);
    font-weight: bold;
    font-size: 150%;
}

.left .screenlet-title-bar {
    clear: both;
    margin: 30px 0 20px 0;
    padding: 4px 20px 3px 20px;
    background: rgb(190, 190, 190);
    font-family: "trebuchet ms", arial, sans-serif;
    color: rgb(255, 255, 255);
    font-weight: bold;
    font-size: 150%;
}

.left h2 {
    clear: both;
    margin: 20px 10px 10px 20px;
    font-family: "trebuchet ms", arial, sans-serif;
    color: rgb(100, 100, 100);
    font-weight: bold;
    font-size: 150%;
}

.left h3 {
    clear: both;
    margin: 10px 10px 5px 20px;
    color: rgb(80, 80, 80);
    font-weight: bold;
    font-size: 110%;
}

/* Note: h2 not existent, to make identical to formats for left for easier exchange */

.left p {
    clear: both;
    margin: 0 10px 10px 20px;
    color: rgb(80, 80, 80);
    line-height: 1.3em;
    font-size: 110%;
}

.left p.center {
    text-align: center;
}

.left p.right {
    text-align: right;
}

.left ul {
    list-style: none;
    margin: 0.5em 10px 1.0em 20px;
}

.left ul li {
    margin: 5px 0 0.2em 2px;
    padding: 0px 0px 0 11px;
    background: url(/multiflex/bg_bullet_full_1.gif) no-repeat 0 0.4em;
    line-height: 1.2em;
    font-size: 110%;
}

.left ol {
    margin: 0.5em 10px 1.0em 40px !important /*Non-IE6*/;
    margin: 0.5em 10px 1.0em 45px /*IE6*/;
}

.left ol li {
    list-style-position: outside;
    margin: 0 0 0.4em 0;
    font-size: 110%;
}

/* MAIN CONTENT */
.center h1.pagetitle,
.noclumns h1.pagetitle {
    margin: 0 0 0.4em 0;
    padding: 0 0 2px 0;
    border-bottom: solid 7px rgb(225, 225, 225);
    font-family: "trebuchet ms", arial, sans-serif;
    color: rgb(100, 100, 100);
    font-weight: bold;
    font-size: 220%;
}

.center h1.block,
.nocolumns h1.block {
    clear: both;
    margin: 1.0em 0 0em 0;
    padding: 2px 0 2px 2px;
    background: rgb(190, 190, 190);
    font-family: "trebuchet ms", arial, sans-serif;
    color: rgb(255, 255, 255);
    font-weight: bold;
    font-size: 220%;
}

.center h1 {
    clear: both;
    margin: 1.0em 0 0.5em 0;
    font-family: "trebuchet ms", arial, sans-serif;
    color: rgb(80, 80, 80);
    font-weight: normal;
    font-size: 210%;
}

.nocolumns h1 {
    background: rgb(190, 190, 190);
    padding: 2px 0 2px 20px;
    clear: both;
    font-family: "trebuchet ms", arial, sans-serif;
    color: rgb(80, 80, 80);
    font-weight: normal;
    font-size: 210%;
}

.center h2 {
    clear: both;
    margin: 1.0em 0 0.5em 0;
    font-family: "trebuchet ms", arial, sans-serif;
    color: rgb(80, 80, 80);
    font-weight: normal;
    font-size: 170%;
}

.center h3 {
    clear: both;
    margin: -1.0em 0 0.5em 0;
    font-family: "trebuchet ms", arial, sans-serif;
    color: rgb(125, 125, 125);
    font-weight: normal;
    font-size: 130%;
}

.center h1.side {
    clear: none;
}

.center h2.side {
    clear: none;
}

.center h3.side {
    clear: none;
}

.center h4 {
    margin: 1.5em 0 1.0em 0;
    color: rgb(80, 80, 80);
    font-family: "trebuchet ms", arial, sans-serif;
    font-weight: normal;
    font-size: 170%;
}

.center h5 {
    margin: 1.5em 0 1.0em 0;
    color: rgb(80, 80, 80);
    font-family: "trebuchet ms", arial, sans-serif;
    font-size: 140%;
}

.center h6 {
    margin: 1.2em 0 0.2em 0;
    color: rgb(80, 80, 80);
    font-weight: bold;
    font-size: 120%;
}

.center p {
    margin: 0 0 1.0em 0;
    line-height: 1.5em;
    font-size: 120%;
}

.center p.center {
    text-align: center;
}

.center p.right {
    text-align: right;
}

.center p.details {
    clear: both;
    margin: -0.25em 0 1.0em 0;
    line-height: 1.0em;
    font-size: 110%;
}

.center blockquote {
    clear: both;
    margin: 0 30px 0.6em 30px;
    font-size: 90%;
}

.center table {
    clear: both;
    width: 100%;
    margin: 2.0em 0 0.2em 0;
    table-layout: fixed;
    border-style: hidden;
    border-collapse: collapse;
    empty-cells: show;
    background-color: rgb(233, 232, 244);
}

.center table th.top {
    height: 3.5em;
    padding: 0 7px 0 7px;
    empty-cells: show;
    background-color: rgb(175, 175, 175);
    text-align: left;
    color: rgb(255, 255, 255);
    font-weight: bold;
    font-size: 110%;
}

.center table th {
    height: 3.0em;
    padding: 2px 20px 2px 7px;
    border-left: solid 2px rgb(255, 255, 255);
    border-right: solid 2px rgb(255, 255, 255);
    border-top: solid 2px rgb(255, 255, 255);
    border-bottom: solid 2px rgb(255, 255, 255);
    background-color: rgb(225, 225, 225);
    text-align: left;
    color: rgb(80, 80, 80);
    font-weight: bold;
    font-size: 110%;
}

.center table td {
    height: 3.0em;
    padding: 2px 7px 2px 7px;
    border-left: solid 2px rgb(255, 255, 255);
    border-right: solid 2px rgb(255, 255, 255);
    border-top: solid 2px rgb(255, 255, 255);
    border-bottom: solid 2px rgb(255, 255, 255);
    background-color: rgb(225, 225, 225);
    text-align: left;
    font-weight: normal;
    color: rgb(80, 80, 80);
    font-size: 110%;
}

p.caption {
    clear: both;
    margin: 0.5em 0 2.0em 20px;
    text-align: left;
    color: rgb(80, 80, 80);
    font-size: 110%;
}

.center ul {
    list-style: none;
    margin: 0.5em 0 1.0em 0;
}

.center ul li {
    margin: 0 0 0.2em 2px;
    padding: 0 0 0 12px;
    background: url(/multiflex/bg_bullet_full_1.gif) no-repeat 0 0.5em;
    line-height: 1.4em;
    font-size: 120%;
}

.center ol {
    margin: 0.5em 0 1.0em 20px !important /*Non-IE6*/;
    margin: 0.5em 0 1.0em 25px /*IE6*/;
}

.center ol li {
    list-style-position: outside;
    margin: 0 0 0.2em 0;
    line-height: 1.4em;
    font-size: 120%;
}

.contactform {
    width: 418px;
    margin: 2.0em 0 0 0;
    padding: 10px 10px 0 10px;
    border: solid 1px rgb(200, 200, 200);
    background-color: rgb(240, 240, 240);
}

.contactform fieldset {
    padding: 20px 0 0 0 !important /*Non-IE6*/;
    padding: 0 /*IE6*/;
    margin: 0 0 20px 0;
    border: solid 1px rgb(220, 220, 220);
}

.contactform fieldset legend {
    margin: 0 0 0 5px !important /*Non-IE*/;
    margin: 0 0 20px 5px /*IE6*/;
    padding: 0 2px 0 2px;
    color: rgb(80, 80, 80);
    font-weight: bold;
    font-size: 130%;
}

.contactform label.left {
    float: left;
    width: 100px;
    margin: 0 0 0 10px;
    padding: 2px;
    font-size: 110%;
}

.contactform select.combo {
    width: 175px;
    padding: 2px;
    border: solid 1px rgb(200, 200, 200);
    font-family: verdana, arial, sans-serif;
    font-size: 110%;
}

.contactform input.field {
    width: 275px;
    padding: 2px;
    border: solid 1px rgb(200, 200, 200);
    font-family: verdana, arial, sans-serif;
    font-size: 110%;
}

.contactform textarea {
    width: 275px;
    padding: 2px;
    border: solid 1px rgb(200, 200, 200);
    font-family: verdana, arial, sans-serif;
    font-size: 110%;
}

.contactform input.button {
    float: right;
    width: 9.0em;
    margin-right: 20px;
    padding: 1px !important /*Non-IE6*/;
    padding: 0 /*IE6*/;
    background: rgb(230, 230, 230);
    border: solid 1px rgb(150, 150, 150);
    text-align: center;
    font-family: verdana, arial, sans-serif;
    color: rgb(150, 150, 150);
    font-size: 110%;
}

.contactform input.button:hover {
    cursor: pointer;
    border: solid 1px rgb(80, 80, 80);
    background: rgb(220, 220, 220);
    color: rgb(80, 80, 80);
}

/* MAIN SUBCONTENT */
.right h1 {
    clear: both;
    margin: 0 0 10px 0;
    padding: 4px 10px 3px 10px;
    background-color: rgb(190, 190, 190);
    font-family: "trebuchet ms", arial, sans-serif;
    color: rgb(255, 255, 255);
    font-weight: bold;
    font-size: 140%;
}

.right .screenlet-title-bar {
    clear: both;
    margin: 0 0 10px 0;
    padding: 4px 10px 3px 10px;
    background-color: rgb(190, 190, 190);
    font-family: "trebuchet ms", arial, sans-serif;
    color: rgb(255, 255, 255);
    font-weight: bold;
    font-size: 140%;
}

.right h1.green {
    clear: both;
    margin: 0 0 5px 0;
    padding: 4px 10px 3px 10px;
    background-color: rgb(160, 214, 81);
    font-family: "trebuchet ms", verdana, arial, sans-serif;
    color: rgb(255, 255, 255);
    font-weight: bold;
    font-size: 140%;
}

.right h1.blue {
    clear: both;
    margin: 0 0 5px 0;
    padding: 4px 10px 3px 10px;
    background-color: rgb(137, 170, 214);
    font-family: "trebuchet ms", verdana, arial, sans-serif;
    color: rgb(255, 255, 255);
    font-weight: bold;
    font-size: 140%;
}

.right h1.orange {
    clear: both;
    margin: 0 0 5px 0;
    padding: 4px 10px 3px 10px;
    background-color: rgb(232, 177, 13);
    font-family: "trebuchet ms", verdana, arial, sans-serif;
    color: rgb(255, 255, 255);
    font-weight: bold;
    font-size: 140%;
}

/* Note: h2 non-existent, to make HTML-code interchangeable between 'left' and 'right' */
.right h3 {
    clear: both;
    margin: 1.0em 10px 0.5em 10px;
    color: rgb(80, 80, 80);
    font-weight: bold;
    font-size: 110%;
}

.right p {
    clear: both;
    margin: 0 10px 1.0em 10px;
    color: rgb(80, 80, 80);
    line-height: 1.3em;
    font-size: 110%;
}

.right p.center {
    text-align: center;
}

.right p.right {
    text-align: right;
}

.right ul {
    list-style: none;
    margin: 0.5em 10px 1.0em 10px;
}

.right ul li {
    margin: 5px 0 0.2em 2px;
    padding: 0 0 0 11px;
    background: url(/multiflex/bg_bullet_full_1.gif) no-repeat 0 0.4em;
    line-height: 1.2em;
    font-size: 110%;
}

.right ol {
    margin: 0.5em 10px 1.0em 30px !important /*Non-IE6*/;
    margin: 0.5em 10px 1.0em 35px /*IE6*/;
}

.right ol li {
    list-style-position: outside;
    margin: 0 0 0.4em 0;
    font-size: 110%;
}

a, address, caption, cite, code, dfn, em, th, var {
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
}

caption, th {
    text-align: left;
}

ol, ul {
    list-style: none;
}

/* ===== Basic Element Styles ===== */

a, a:visited {
    color: #000099;
    font-weight: bold;
}

a:hover, a:active {
    text-decoration: underline;
}

.disabled {
    color: #333366;
    text-decoration: none;
}

textarea, input, select {
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

hr {
    background-color: #999999;
    border: 0;
    height: 1px;
    margin: 5px 0 5px 0;
}

input[type="radio"],
input[type="checkbox"] {
    font-size: 8pt;
}

input[type="text"],
input[type="password"] {
    font-size: 8pt;
    background: white;
    border: #999999 solid 1px;
    margin: 2px;
}

input[type="submit"],
input[type="button"],
input[type="reset"] {
    font-size: 8pt;
    font-weight: bold;
    color: #467AA7;
    background: white;
    border: #999999 solid 1px;
    margin: 2px;
}

input[type="submit"]:hover {
    color: #ff0000;
    cursor: pointer;
    text-decoration: underline;
}

input[type="file"] {
    font-size: 11px;
}

select {
    background: #FFFFFF;
    font-size: 8pt;
    border: #999999 solid 1px;
    margin: 2px;
}

/* IE7 fix */
table {
    font-size: 10px;
}

/* IE7 fix */
table input {
    border: #999999 solid 1px;
}

textarea {
    background: #FFFFFF;
    font-size: 8pt;
    border: #999999 solid 1px;
    margin: 2px;
}

th, th a {
    color: #000000;
    font-weight: bold;
}

img {
    behavior: url("/images/pngbehavior.htc");
}

.endcolumns {
    clear: both;
    height: 0px;
    visibility: hidden;
}

.hidden {
    visibility: hidden;
}

.label {
    /* Used for <input> element labels */
    font-weight: bold;
    padding-right: 11px;
    text-align: right;
    white-space: nowrap;
    width: 1%;
}

#microcart {
    font-weight: bold;
    text-decoration: none;
}

#microcart a {
    text-decoration: none;
    color: #000099;
}

#microcart a:hover {
    color: black;
    text-decoration: underline;
}

#microcart .disabled {
    color: #666666;
}

#ecom-mainarea .rightonly {
    width: 670px;
    padding: 0 1em 0 1.5em;
    background: #FFFFFF url(/multiflex/bg_head_breadcrumbs.jpg) repeat-y;
}

#ecom-mainarea .leftonly {
    width: 670px;
    margin-left: 210px;
}

.boxlink {
    float: right;
}

A.boxheadbutton {
    font-size: 8pt;
    font-weight: bold;
    text-decoration: none;
    color: #FFFFFF;
}

A.boxheadbutton:hover {
    font-size: 8pt;
    font-weight: bold;
    text-decoration: none;
    color: red;
}

/* Form layout styles to simulate a table-style layout */
#ecom-mainarea .form-row {
    clear: both;
    padding-top: 2px;
}

#ecom-mainarea .form-label {
    float: left;
    width: 180px;
    text-align: right;
    padding-top: 5px;
}

#ecom-mainarea .form-field {
    float: left;
    margin-left: 10px;
    text-align: left;
}

/* ===== Text/Label Styles ===== */
.tablebuttontext {
    color: #1E3C66;
}

.contenttext {
    font-size: 8pt;
}

DIV.tabletexthidden {
    visibility: hidden;
}

.info {
    font-style: normal;
    color: #000000;
}

DIV.graybox {
    font-weight: bold;
    background: #CCCCCC;
    border: 1px solid #000000;
    text-align: center;
    margin: 2px auto;
    width: auto;
    padding: 4px;
}

.boxoutside {
    background: #FFFFFF;
    border-color: #999999;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
}

.boxtop {
    background: #000099;
    padding-top: 1px;
    padding-bottom: 1px;
    padding-right: 4px;
    padding-left: 4px;
    border-color: #999999;
    border-style: solid;
    border-width: 0px 0px 0px 0px;
}

.boxbottom {
    background: #FFFFFF;
    padding: 4px;
    border-color: #999999;
    border-style: solid;
    border-width: 0px 0px 0px 0px;
}

.button {
    border-style: outset;
    border-color: #9999CC;
    border-width: 2px;
    background: #dddddd;
    padding-right: 5px;
    padding-left: 5px;
}

.tableheadtext {
    font-weight: bold;
    color: black;
}

A.tableheadbutton {
    font-weight: bold;
    color: black;
}

A.tableheadbutton:hover {
    font-weight: bold;
    color: red;
}

.browsecategorylist {
    margin-left: 10px;
}

.browsecategorytext {
    font-weight: bold;
    color: #467AA7;
    padding-left: 10px;
    background: url(/multiflex/bg_bullet_full_2.gif) no-repeat 0px 0.5em;
}

A.browsecategorybutton {
    font-weight: bold;
    color: #000099;
}

A.browsecategorybutton:hover {
    color: #000099;
}

.browsecategorybuttondisabled {
    font-weight: bold;
    color: #333333;
}

A.buttontext, .buttontextdisabled {
    font-weight: bold;
    background: white;
    border: #999999 solid 1px;
    margin: 2px 1px 2px 1px;
    padding: 1px 4px 1px 4px;
    line-height: 2em;
}

A.buttontext {
    color: #000099;
}

A.buttontext:hover {
    color: red;
}

A.linktext {
    font-weight: bold;
    color: #000099;
}

A.linktext:hover {
    color: red;
}

.buttontextdisabled {
    color: #333333;
}

.submenutextinfo {
    font-weight: bold;
    color: white;
    padding-left: 6px;
    padding-right: 5px;
    border-right: 1px solid #5886C6
}

.submenutext, A.submenutext, A.submenutext:visited {
    font-weight: bold;
    color: yellow;
    padding-left: 6px;
    padding-right: 5px;
    border-right: 1px solid #5886C6
}

A.submenutext:hover {
    color: yellow;
}

.submenutextdisabled, A.submenutextdisabled {
    font-weight: bold;
    color: #CCCCCC;
    padding-left: 6px;
    padding-right: 5px;
    border-right: 1px solid #5886C6
}

A.submenutextdisabled:hover {
    font-weight: bold;
    color: yellow;
}

.submenutextinforight {
    font-weight: bold;
    color: white;
    padding-left: 6px;
}

.submenutextright, A.submenutextright {
    font-weight: bold;
    color: yellow;
    padding-left: 6px;
}

A.submenutextright:hover {
    color: yellow;
    text-decoration: underline;
}

.submenutextrightdisabled, A.submenutextrightdisabled {
    font-weight: bold;
    color: #CCCCCC;
    padding-left: 6px;
}

A.submenutextrightdisabled:hover {
    color: yellow;
}

A.lightbuttontext {
    font-weight: bold;
    color: yellow;
    border: none;
}

A.lightbuttontext:hover {
    color: yellow;
}

A.lightbuttontextsmall {
    font-size: 8px;
    font-weight: bold;
    color: yellow;
    border: none;
}

.lightbuttontextdisabled {
    font-weight: bold;
    color: #CCCCCC;
}

A.buttontextbig, .buttontextbigdisabled {
    font-size: 15px;
    font-weight: bold;
    background: white;
    border: #999999 solid 1px;
    margin: 2px 2px 2px 2px;
    padding: 1px 4px 1px 4px;
}

A.buttontextbig {
    color: #000099;
}

.buttontextbigdisabled {
    color: #CCCCCC;
}

A.buttontextbig:hover {
    color: red;
}

A IMG.imageborder {
    border-style: solid;
    border-width: 1px;
    border-color: #999999;
}

/* ===== Other Header Styles ===== */

.headersmalltext {
    font-size: 8pt;
    font-weight: bold;
    color: black;
}

a.headersmalllink {
    font-size: 8pt;
    font-weight: bold;
    color: #000099;
}

a.headersmalllink:hover {
    color: red;
}

/* ===== Misc/General Styles ===== */
.errorMessage {
    font-size: 8pt;
    font-weight: bold;
    color: red;
}

.eventMessage {
    font-size: 8pt;
    font-weight: bold;
    color: #000099;
}

.ontab {
    font-size: 8pt;
    background: black;
    padding: 2px;
    border-style: inset;
    border-width: 3px;
}

a.onlnk {
    font-size: 8pt;
    font-weight: bold;
    color: #FFFFFF;
    padding: 2px;
}

.offtab {
    background: #CCCCCC;
    padding: 2px;
    border-style: outset;
    border-width: 3px;
}

a.offlnk {
    font-weight: bold;
    color: #000099;
    padding: 2px;
}

a.offlnk:hover {
    color: red;
}

.areaheader {
    font-weight: bold;
    color: #FFFFFF;
    width: 100%;
    background: black;
    padding: 2px;
}

.edittable {
    border-color: #000000 #000000 #003333;
    border-style: solid;
    border-top-width: thin;
    border-right-width: thin;
    border-bottom-width: thin;
    border-left-width: thin
}

.editInputBox {
    font-size: 8pt;
    background: #FFFFFF;
    border: #999999 solid 1px;
    margin: 2px;
}

.smallSubmit {
    font-size: 8pt;
    font-weight: bold;
    color: #000099;
    background: white;
    border: #999999 solid 1px;
    margin: 2px;
}

.mediumSubmit, .largeSubmit, .loginButton {
    font-size: 10pt;
    font-weight: bold;
    color: #000099;
    background: white;
    border: #999999 solid 1px;
    margin: 2px;
}

.smallSubmit:hover, .mediumSubmit:hover, .largeSubmit:hover, .loginButton:hover {
    color: red;
}

.smallAltSubmit, .mediumAltSubmit, .largeAltSubmit {
    font-size: 8pt;
}

.basePrice {
    color: black;
}

.normalPrice {
    color: green;
}

.salePrice {
    color: red;
}

/* ===== Product Summary Styles ===== */
.product-prevnext {
    text-align: right;
}

.product-prevnext .tabletext {
    font-weight: bold;
}

.productcategorylink-container {
    position: relative;
    margin-top: 10px;
    margin-bottom: 5px;
    border-top: #999 solid 1px;
}

.productcategorylink {
    position: relative;
    padding: 5px;
    border-bottom: #999 solid 1px;
    height: 60px;
}

.productcategorylink .smallimage {
    float: left;
    /* position: absolute; top: 5px; left: 5px; */
    margin: 0px 5px 5px 0px;
}

.productcategorylink .smallimage img {
    border: #CCC solid 1px;
    height: 50px;
}

.productsummary-container {
    position: relative;
    margin-top: 10px;
    margin-bottom: 5px;
    border-top: #999 solid 1px;
}

.productsummary {
    position: relative;
    padding: 5px;
    border-bottom: #999 solid 1px;
    min-height: 60px;
}

.productsummary .smallimage {
    float: left;
    /* position: absolute; top: 5px; left: 5px; */
    margin: 0px 5px 5px 0px;
}

.productsummary .smallimage img {
    border: #CCC solid 1px;
    height: 50px;
}

.productsummary .productbuy {
    float: right;
    width: 160px;
    margin: 5px;
    text-align: right;
}

.matrix .productsummary {
    border: none;
}

.matrix table td {
    vertical-align: top;
    background: none;
}

.matrix .productsummary .smallimage {
    float: none;
    text-align: center;
}

.matrix .productsummary .smallimage img {
    height: 100px;
}

.matrix .productsummary .productbuy {
    float: none;
    text-align: left;
}

.productsummary .productinfo {
    text-align: left;
}

/* ===== Product Detail Styles ===== */
#productdetail #download-files {
    margin-top: 10px;
    padding-top: 5px;
    border-top: #999 solid 1px;
}

#productdetail #long-description {
    margin-top: 10px;
    padding-top: 5px;
    border-top: #999 solid 1px;
}

#productdetail #reviews {
    margin-top: 10px;
    padding-top: 5px;
    border-top: #999 solid 1px;
}

#productdetail #associated-products {
    margin-top: 10px;
    padding-top: 5px;
    border-top: #999 solid 1px;
}

.lefthalf {
    left: 0;
    width: 49%;
    height: 1%;
    margin: 0% 1% 1% 0%;
    float: left;
}

.righthalf {
    float: right;
    height: 1%;
    width: 49%;
    right: 0;
    margin: 0 0 1% 1%;
}

.leftclear {
    height: 1%;
    clear: left;
}

.bothclear {
    height: 1%;
    clear: both;
}

.bl {
    background: url(/multiflex/bg_corner_topleft.gif) #AAAAAA 0 100% no-repeat;
}

.br {
    background: url(/multiflex/bg_corner_topleft.gif) 100% 100% no-repeat;
}

.tl {
    background: url(/multiflex/bg_corner_topleft.gif) 0 0 no-repeat;
}

.tr {
    background: url(/multiflex/bg_corner_topright.gif) 100% 0 no-repeat;
    padding: 10px;
}

.clear {
    font-size: 1px;
    height: 1px;
}

.wait-spinner {
    float: right;
    margin-right: 10px;
}

.wait-spinner div {
    padding-top: 4px;
}

img.cssImgXLarge {
    /*border: 1px black solid;*/
    max-width: 200px;
    max-height: 150px;
}

img.cssImgLarge {
    /*border: 1px black solid;*/
    max-width: 100px;
    max-height: 75px;
}

img.cssImgStandard {
    /*border: 1px black solid;*/
    max-width: 70px;
    max-height: 52px;
}

img.cssImgSmall {
    /*border: 1px black solid;*/
    max-width: 50px;
    max-height: 37px;
}

/* ========================================================== */
/* ===== JavaScript jQuery widgets                      ===== */
/* ========================================================== */
/*
 * jQuery UI CSS Framework @VERSION
 *
 * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Theming/API
 */

/* Layout helpers
----------------------------------*/
.ui-helper-hidden {
    display: none;
}

.ui-helper-hidden-accessible {
    position: absolute;
    left: -99999999px;
}

.ui-helper-reset {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    line-height: 1.3;
    text-decoration: none;
    font-size: 100%;
    list-style: none;
}

.ui-helper-clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.ui-helper-clearfix {
    display: inline-block;
}

/* required comment for clearfix to work in Opera \*/
* html .ui-helper-clearfix {
    height: 1%;
}

.ui-helper-clearfix {
    display: block;
}

/* end clearfix */
.ui-helper-zfix {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    opacity: 0;
    filter: Alpha(Opacity=0);
}

/* Interaction Cues
----------------------------------*/
.ui-state-disabled {
    cursor: default !important;
}

/* Icons
----------------------------------*/

/* states and images */
.ui-icon {
    display: block;
    text-indent: -99999px;
    overflow: hidden;
    background-repeat: no-repeat;
}

/* Misc visuals
----------------------------------*/

/* Overlays */
.ui-widget-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*
 * jQuery UI CSS Framework @VERSION
 *
 * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Theming/API
 *
 * To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Verdana,Arial,sans-serif&fwDefault=normal&fsDefault=1.1em&cornerRadius=4px&bgColorHeader=cccccc&bgTextureHeader=03_highlight_soft.png&bgImgOpacityHeader=75&borderColorHeader=aaaaaa&fcHeader=222222&iconColorHeader=222222&bgColorContent=ffffff&bgTextureContent=01_flat.png&bgImgOpacityContent=75&borderColorContent=aaaaaa&fcContent=222222&iconColorContent=222222&bgColorDefault=e6e6e6&bgTextureDefault=02_glass.png&bgImgOpacityDefault=75&borderColorDefault=d3d3d3&fcDefault=555555&iconColorDefault=888888&bgColorHover=dadada&bgTextureHover=02_glass.png&bgImgOpacityHover=75&borderColorHover=999999&fcHover=212121&iconColorHover=454545&bgColorActive=ffffff&bgTextureActive=02_glass.png&bgImgOpacityActive=65&borderColorActive=aaaaaa&fcActive=212121&iconColorActive=454545&bgColorHighlight=fbf9ee&bgTextureHighlight=02_glass.png&bgImgOpacityHighlight=55&borderColorHighlight=fcefa1&fcHighlight=363636&iconColorHighlight=2e83ff&bgColorError=fef1ec&bgTextureError=02_glass.png&bgImgOpacityError=95&borderColorError=cd0a0a&fcError=cd0a0a&iconColorError=cd0a0a&bgColorOverlay=aaaaaa&bgTextureOverlay=01_flat.png&bgImgOpacityOverlay=0&opacityOverlay=30&bgColorShadow=aaaaaa&bgTextureShadow=01_flat.png&bgImgOpacityShadow=0&opacityShadow=30&thicknessShadow=8px&offsetTopShadow=-8px&offsetLeftShadow=-8px&cornerRadiusShadow=8px
 */

/* Component containers
----------------------------------*/
.ui-widget {
    font-family: Verdana, Arial, sans-serif;
    font-size: 1.1em;
}

.ui-widget .ui-widget {
    font-size: 1em;
}

.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
    font-family: Verdana, Arial, sans-serif;
    font-size: 1em;
}

.ui-widget-content {
    border: 1px solid #aaaaaa;
    background: #ffffff url(images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x;
    color: #222222;
}

.ui-widget-content a {
    color: #222222;
}

.ui-widget-header {
    border: 1px solid #aaaaaa;
    background: #cccccc url(images/ui-bg_highlight-soft_75_cccccc_1x100.png) 50% 50% repeat-x;
    color: #222222;
    font-weight: bold;
}

.ui-widget-header a {
    color: #222222;
}

/* Interaction states
----------------------------------*/
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    border: 1px solid #d3d3d3;
    background: #e6e6e6 url(images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;
    font-weight: normal;
    color: #555555;
}

.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited {
    color: #555555;
    text-decoration: none;
}

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
    border: 1px solid #999999;
    background: #dadada url(images/ui-bg_glass_75_dadada_1x400.png) 50% 50% repeat-x;
    font-weight: normal;
    color: #212121;
}

.ui-state-hover a, .ui-state-hover a:hover {
    color: #212121;
    text-decoration: none;
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
    border: 1px solid #aaaaaa;
    background: #ffffff url(images/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x;
    font-weight: normal;
    color: #212121;
}

.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
    color: #212121;
    text-decoration: none;
}

.ui-widget :active {
    outline: none;
}

/* Interaction Cues
----------------------------------*/
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    border: 1px solid #fcefa1;
    background: #fbf9ee url(images/ui-bg_glass_55_fbf9ee_1x400.png) 50% 50% repeat-x;
    color: #363636;
}

.ui-state-highlight a, .ui-widget-content .ui-state-highlight a, .ui-widget-header .ui-state-highlight a {
    color: #363636;
}

.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {
    border: 1px solid #cd0a0a;
    background: #fef1ec url(images/ui-bg_glass_95_fef1ec_1x400.png) 50% 50% repeat-x;
    color: #cd0a0a;
}

.ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a {
    color: #cd0a0a;
}

.ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text {
    color: #cd0a0a;
}

.ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary {
    font-weight: bold;
}

.ui-priority-secondary, .ui-widget-content .ui-priority-secondary, .ui-widget-header .ui-priority-secondary {
    opacity: .7;
    filter: Alpha(Opacity=70);
    font-weight: normal;
}

.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled {
    opacity: .35;
    filter: Alpha(Opacity=35);
    background-image: none;
}

/* Icons
----------------------------------*/

/* states and images */
.ui-icon {
    width: 16px;
    height: 16px;
    background-image: url(images/ui-icons_222222_256x240.png);
}

.ui-widget-content .ui-icon {
    background-image: url(images/ui-icons_222222_256x240.png);
}

.ui-widget-header .ui-icon {
    background-image: url(images/ui-icons_222222_256x240.png);
}

.ui-state-default .ui-icon {
    background-image: url(images/ui-icons_888888_256x240.png);
}

.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {
    background-image: url(images/ui-icons_454545_256x240.png);
}

.ui-state-active .ui-icon {
    background-image: url(images/ui-icons_454545_256x240.png);
}

.ui-state-highlight .ui-icon {
    background-image: url(images/ui-icons_2e83ff_256x240.png);
}

.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {
    background-image: url(images/ui-icons_cd0a0a_256x240.png);
}

/* positioning */
.ui-icon-carat-1-n {
    background-position: 0 0;
}

.ui-icon-carat-1-ne {
    background-position: -16px 0;
}

.ui-icon-carat-1-e {
    background-position: -32px 0;
}

.ui-icon-carat-1-se {
    background-position: -48px 0;
}

.ui-icon-carat-1-s {
    background-position: -64px 0;
}

.ui-icon-carat-1-sw {
    background-position: -80px 0;
}

.ui-icon-carat-1-w {
    background-position: -96px 0;
}

.ui-icon-carat-1-nw {
    background-position: -112px 0;
}

.ui-icon-carat-2-n-s {
    background-position: -128px 0;
}

.ui-icon-carat-2-e-w {
    background-position: -144px 0;
}

.ui-icon-triangle-1-n {
    background-position: 0 -16px;
}

.ui-icon-triangle-1-ne {
    background-position: -16px -16px;
}

.ui-icon-triangle-1-e {
    background-position: -32px -16px;
}

.ui-icon-triangle-1-se {
    background-position: -48px -16px;
}

.ui-icon-triangle-1-s {
    background-position: -64px -16px;
}

.ui-icon-triangle-1-sw {
    background-position: -80px -16px;
}

.ui-icon-triangle-1-w {
    background-position: -96px -16px;
}

.ui-icon-triangle-1-nw {
    background-position: -112px -16px;
}

.ui-icon-triangle-2-n-s {
    background-position: -128px -16px;
}

.ui-icon-triangle-2-e-w {
    background-position: -144px -16px;
}

.ui-icon-arrow-1-n {
    background-position: 0 -32px;
}

.ui-icon-arrow-1-ne {
    background-position: -16px -32px;
}

.ui-icon-arrow-1-e {
    background-position: -32px -32px;
}

.ui-icon-arrow-1-se {
    background-position: -48px -32px;
}

.ui-icon-arrow-1-s {
    background-position: -64px -32px;
}

.ui-icon-arrow-1-sw {
    background-position: -80px -32px;
}

.ui-icon-arrow-1-w {
    background-position: -96px -32px;
}

.ui-icon-arrow-1-nw {
    background-position: -112px -32px;
}

.ui-icon-arrow-2-n-s {
    background-position: -128px -32px;
}

.ui-icon-arrow-2-ne-sw {
    background-position: -144px -32px;
}

.ui-icon-arrow-2-e-w {
    background-position: -160px -32px;
}

.ui-icon-arrow-2-se-nw {
    background-position: -176px -32px;
}

.ui-icon-arrowstop-1-n {
    background-position: -192px -32px;
}

.ui-icon-arrowstop-1-e {
    background-position: -208px -32px;
}

.ui-icon-arrowstop-1-s {
    background-position: -224px -32px;
}

.ui-icon-arrowstop-1-w {
    background-position: -240px -32px;
}

.ui-icon-arrowthick-1-n {
    background-position: 0 -48px;
}

.ui-icon-arrowthick-1-ne {
    background-position: -16px -48px;
}

.ui-icon-arrowthick-1-e {
    background-position: -32px -48px;
}

.ui-icon-arrowthick-1-se {
    background-position: -48px -48px;
}

.ui-icon-arrowthick-1-s {
    background-position: -64px -48px;
}

.ui-icon-arrowthick-1-sw {
    background-position: -80px -48px;
}

.ui-icon-arrowthick-1-w {
    background-position: -96px -48px;
}

.ui-icon-arrowthick-1-nw {
    background-position: -112px -48px;
}

.ui-icon-arrowthick-2-n-s {
    background-position: -128px -48px;
}

.ui-icon-arrowthick-2-ne-sw {
    background-position: -144px -48px;
}

.ui-icon-arrowthick-2-e-w {
    background-position: -160px -48px;
}

.ui-icon-arrowthick-2-se-nw {
    background-position: -176px -48px;
}

.ui-icon-arrowthickstop-1-n {
    background-position: -192px -48px;
}

.ui-icon-arrowthickstop-1-e {
    background-position: -208px -48px;
}

.ui-icon-arrowthickstop-1-s {
    background-position: -224px -48px;
}

.ui-icon-arrowthickstop-1-w {
    background-position: -240px -48px;
}

.ui-icon-arrowreturnthick-1-w {
    background-position: 0 -64px;
}

.ui-icon-arrowreturnthick-1-n {
    background-position: -16px -64px;
}

.ui-icon-arrowreturnthick-1-e {
    background-position: -32px -64px;
}

.ui-icon-arrowreturnthick-1-s {
    background-position: -48px -64px;
}

.ui-icon-arrowreturn-1-w {
    background-position: -64px -64px;
}

.ui-icon-arrowreturn-1-n {
    background-position: -80px -64px;
}

.ui-icon-arrowreturn-1-e {
    background-position: -96px -64px;
}

.ui-icon-arrowreturn-1-s {
    background-position: -112px -64px;
}

.ui-icon-arrowrefresh-1-w {
    background-position: -128px -64px;
}

.ui-icon-arrowrefresh-1-n {
    background-position: -144px -64px;
}

.ui-icon-arrowrefresh-1-e {
    background-position: -160px -64px;
}

.ui-icon-arrowrefresh-1-s {
    background-position: -176px -64px;
}

.ui-icon-arrow-4 {
    background-position: 0 -80px;
}

.ui-icon-arrow-4-diag {
    background-position: -16px -80px;
}

.ui-icon-extlink {
    background-position: -32px -80px;
}

.ui-icon-newwin {
    background-position: -48px -80px;
}

.ui-icon-refresh {
    background-position: -64px -80px;
}

.ui-icon-shuffle {
    background-position: -80px -80px;
}

.ui-icon-transfer-e-w {
    background-position: -96px -80px;
}

.ui-icon-transferthick-e-w {
    background-position: -112px -80px;
}

.ui-icon-folder-collapsed {
    background-position: 0 -96px;
}

.ui-icon-folder-open {
    background-position: -16px -96px;
}

.ui-icon-document {
    background-position: -32px -96px;
}

.ui-icon-document-b {
    background-position: -48px -96px;
}

.ui-icon-note {
    background-position: -64px -96px;
}

.ui-icon-mail-closed {
    background-position: -80px -96px;
}

.ui-icon-mail-open {
    background-position: -96px -96px;
}

.ui-icon-suitcase {
    background-position: -112px -96px;
}

.ui-icon-comment {
    background-position: -128px -96px;
}

.ui-icon-person {
    background-position: -144px -96px;
}

.ui-icon-print {
    background-position: -160px -96px;
}

.ui-icon-trash {
    background-position: -176px -96px;
}

.ui-icon-locked {
    background-position: -192px -96px;
}

.ui-icon-unlocked {
    background-position: -208px -96px;
}

.ui-icon-bookmark {
    background-position: -224px -96px;
}

.ui-icon-tag {
    background-position: -240px -96px;
}

.ui-icon-home {
    background-position: 0 -112px;
}

.ui-icon-flag {
    background-position: -16px -112px;
}

.ui-icon-calendar {
    background-position: -32px -112px;
}

.ui-icon-cart {
    background-position: -48px -112px;
}

.ui-icon-pencil {
    background-position: -64px -112px;
}

.ui-icon-clock {
    background-position: -80px -112px;
}

.ui-icon-disk {
    background-position: -96px -112px;
}

.ui-icon-calculator {
    background-position: -112px -112px;
}

.ui-icon-zoomin {
    background-position: -128px -112px;
}

.ui-icon-zoomout {
    background-position: -144px -112px;
}

.ui-icon-search {
    background-position: -160px -112px;
}

.ui-icon-wrench {
    background-position: -176px -112px;
}

.ui-icon-gear {
    background-position: -192px -112px;
}

.ui-icon-heart {
    background-position: -208px -112px;
}

.ui-icon-star {
    background-position: -224px -112px;
}

.ui-icon-link {
    background-position: -240px -112px;
}

.ui-icon-cancel {
    background-position: 0 -128px;
}

.ui-icon-plus {
    background-position: -16px -128px;
}

.ui-icon-plusthick {
    background-position: -32px -128px;
}

.ui-icon-minus {
    background-position: -48px -128px;
}

.ui-icon-minusthick {
    background-position: -64px -128px;
}

.ui-icon-close {
    background-position: -80px -128px;
}

.ui-icon-closethick {
    background-position: -96px -128px;
}

.ui-icon-key {
    background-position: -112px -128px;
}

.ui-icon-lightbulb {
    background-position: -128px -128px;
}

.ui-icon-scissors {
    background-position: -144px -128px;
}

.ui-icon-clipboard {
    background-position: -160px -128px;
}

.ui-icon-copy {
    background-position: -176px -128px;
}

.ui-icon-contact {
    background-position: -192px -128px;
}

.ui-icon-image {
    background-position: -208px -128px;
}

.ui-icon-video {
    background-position: -224px -128px;
}

.ui-icon-script {
    background-position: -240px -128px;
}

.ui-icon-alert {
    background-position: 0 -144px;
}

.ui-icon-info {
    background-position: -16px -144px;
}

.ui-icon-notice {
    background-position: -32px -144px;
}

.ui-icon-help {
    background-position: -48px -144px;
}

.ui-icon-check {
    background-position: -64px -144px;
}

.ui-icon-bullet {
    background-position: -80px -144px;
}

.ui-icon-radio-off {
    background-position: -96px -144px;
}

.ui-icon-radio-on {
    background-position: -112px -144px;
}

.ui-icon-pin-w {
    background-position: -128px -144px;
}

.ui-icon-pin-s {
    background-position: -144px -144px;
}

.ui-icon-play {
    background-position: 0 -160px;
}

.ui-icon-pause {
    background-position: -16px -160px;
}

.ui-icon-seek-next {
    background-position: -32px -160px;
}

.ui-icon-seek-prev {
    background-position: -48px -160px;
}

.ui-icon-seek-end {
    background-position: -64px -160px;
}

.ui-icon-seek-start {
    background-position: -80px -160px;
}

/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
.ui-icon-seek-first {
    background-position: -80px -160px;
}

.ui-icon-stop {
    background-position: -96px -160px;
}

.ui-icon-eject {
    background-position: -112px -160px;
}

.ui-icon-volume-off {
    background-position: -128px -160px;
}

.ui-icon-volume-on {
    background-position: -144px -160px;
}

.ui-icon-power {
    background-position: 0 -176px;
}

.ui-icon-signal-diag {
    background-position: -16px -176px;
}

.ui-icon-signal {
    background-position: -32px -176px;
}

.ui-icon-battery-0 {
    background-position: -48px -176px;
}

.ui-icon-battery-1 {
    background-position: -64px -176px;
}

.ui-icon-battery-2 {
    background-position: -80px -176px;
}

.ui-icon-battery-3 {
    background-position: -96px -176px;
}

.ui-icon-circle-plus {
    background-position: 0 -192px;
}

.ui-icon-circle-minus {
    background-position: -16px -192px;
}

.ui-icon-circle-close {
    background-position: -32px -192px;
}

.ui-icon-circle-triangle-e {
    background-position: -48px -192px;
}

.ui-icon-circle-triangle-s {
    background-position: -64px -192px;
}

.ui-icon-circle-triangle-w {
    background-position: -80px -192px;
}

.ui-icon-circle-triangle-n {
    background-position: -96px -192px;
}

.ui-icon-circle-arrow-e {
    background-position: -112px -192px;
}

.ui-icon-circle-arrow-s {
    background-position: -128px -192px;
}

.ui-icon-circle-arrow-w {
    background-position: -144px -192px;
}

.ui-icon-circle-arrow-n {
    background-position: -160px -192px;
}

.ui-icon-circle-zoomin {
    background-position: -176px -192px;
}

.ui-icon-circle-zoomout {
    background-position: -192px -192px;
}

.ui-icon-circle-check {
    background-position: -208px -192px;
}

.ui-icon-circlesmall-plus {
    background-position: 0 -208px;
}

.ui-icon-circlesmall-minus {
    background-position: -16px -208px;
}

.ui-icon-circlesmall-close {
    background-position: -32px -208px;
}

.ui-icon-squaresmall-plus {
    background-position: -48px -208px;
}

.ui-icon-squaresmall-minus {
    background-position: -64px -208px;
}

.ui-icon-squaresmall-close {
    background-position: -80px -208px;
}

.ui-icon-grip-dotted-vertical {
    background-position: 0 -224px;
}

.ui-icon-grip-dotted-horizontal {
    background-position: -16px -224px;
}

.ui-icon-grip-solid-vertical {
    background-position: -32px -224px;
}

.ui-icon-grip-solid-horizontal {
    background-position: -48px -224px;
}

.ui-icon-gripsmall-diagonal-se {
    background-position: -64px -224px;
}

.ui-icon-grip-diagonal-se {
    background-position: -80px -224px;
}

/* Misc visuals
----------------------------------*/

/* Corner radius */
.ui-corner-tl {
    -moz-border-radius-topleft: 4px;
    -webkit-border-top-left-radius: 4px;
    border-top-left-radius: 4px;
}

.ui-corner-tr {
    -moz-border-radius-topright: 4px;
    -webkit-border-top-right-radius: 4px;
    border-top-right-radius: 4px;
}

.ui-corner-bl {
    -moz-border-radius-bottomleft: 4px;
    -webkit-border-bottom-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.ui-corner-br {
    -moz-border-radius-bottomright: 4px;
    -webkit-border-bottom-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.ui-corner-top {
    -moz-border-radius-topleft: 4px;
    -webkit-border-top-left-radius: 4px;
    border-top-left-radius: 4px;
    -moz-border-radius-topright: 4px;
    -webkit-border-top-right-radius: 4px;
    border-top-right-radius: 4px;
}

.ui-corner-bottom {
    -moz-border-radius-bottomleft: 4px;
    -webkit-border-bottom-left-radius: 4px;
    border-bottom-left-radius: 4px;
    -moz-border-radius-bottomright: 4px;
    -webkit-border-bottom-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.ui-corner-right {
    -moz-border-radius-topright: 4px;
    -webkit-border-top-right-radius: 4px;
    border-top-right-radius: 4px;
    -moz-border-radius-bottomright: 4px;
    -webkit-border-bottom-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.ui-corner-left {
    -moz-border-radius-topleft: 4px;
    -webkit-border-top-left-radius: 4px;
    border-top-left-radius: 4px;
    -moz-border-radius-bottomleft: 4px;
    -webkit-border-bottom-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.ui-corner-all {
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

/* Overlays */
.ui-widget-overlay {
    background: #aaaaaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x;
    opacity: .30;
    filter: Alpha(Opacity=30);
}

.ui-widget-shadow {
    margin: -8px 0 0 -8px;
    padding: 8px;
    background: #aaaaaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x;
    opacity: .30;
    filter: Alpha(Opacity=30);
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
}

/*
 * jQuery UI Resizable @VERSION
 *
 * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Resizable#theming
 */
.ui-resizable {
    position: relative;
}

.ui-resizable-handle {
    position: absolute;
    font-size: 0.1px;
    z-index: 99999;
    display: block;
}

.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle {
    display: none;
}

.ui-resizable-n {
    cursor: n-resize;
    height: 7px;
    width: 100%;
    top: -5px;
    left: 0;
}

.ui-resizable-s {
    cursor: s-resize;
    height: 7px;
    width: 100%;
    bottom: -5px;
    left: 0;
}

.ui-resizable-e {
    cursor: e-resize;
    width: 7px;
    right: -5px;
    top: 0;
    height: 100%;
}

.ui-resizable-w {
    cursor: w-resize;
    width: 7px;
    left: -5px;
    top: 0;
    height: 100%;
}

.ui-resizable-se {
    cursor: se-resize;
    width: 12px;
    height: 12px;
    right: 1px;
    bottom: 1px;
}

.ui-resizable-sw {
    cursor: sw-resize;
    width: 9px;
    height: 9px;
    left: -5px;
    bottom: -5px;
}

.ui-resizable-nw {
    cursor: nw-resize;
    width: 9px;
    height: 9px;
    left: -5px;
    top: -5px;
}

.ui-resizable-ne {
    cursor: ne-resize;
    width: 9px;
    height: 9px;
    right: -5px;
    top: -5px;
}

/*
 * jQuery UI Selectable @VERSION
 *
 * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Selectable#theming
 */
.ui-selectable-helper {
    position: absolute;
    z-index: 100;
    border: 1px dotted black;
}

/*
 * jQuery UI Accordion @VERSION
 *
 * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Accordion#theming
 */
/* IE/Win - Fix animation bug - #4615 */
.ui-accordion {
    width: 100%;
}

.ui-accordion .ui-accordion-header {
    cursor: pointer;
    position: relative;
    margin-top: 1px;
    zoom: 1;
}

.ui-accordion .ui-accordion-li-fix {
    display: inline;
}

.ui-accordion .ui-accordion-header-active {
    border-bottom: 0 !important;
}

.ui-accordion .ui-accordion-header a {
    display: block;
    font-size: 1em;
    padding: .5em .5em .5em .7em;
}

.ui-accordion-icons .ui-accordion-header a {
    padding-left: 2.2em;
}

.ui-accordion .ui-accordion-header .ui-icon {
    position: absolute;
    left: .5em;
    top: 50%;
    margin-top: -8px;
}

.ui-accordion .ui-accordion-content {
    padding: 1em 2.2em;
    border-top: 0;
    margin-top: -2px;
    position: relative;
    top: 1px;
    margin-bottom: 2px;
    overflow: auto;
    display: none;
    zoom: 1;
}

.ui-accordion .ui-accordion-content-active {
    display: block;
}

/*
 * jQuery UI Autocomplete @VERSION
 *
 * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Autocomplete#theming
 */
.ui-autocomplete {
    position: absolute;
    cursor: default;
}

/* workarounds */
* html .ui-autocomplete {
    width: 1px;
}

/* without this, the menu expands to 100% in IE6 */

/*
 * jQuery UI Menu @VERSION
 *
 * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Menu#theming
 */
.ui-autocomplete-loading {
    background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat !important;
}

.ui-menu {
    list-style: none;
    padding: 2px;
    margin: 0;
    display: block;
    float: left;
}

.ui-menu .ui-menu {
    margin-top: -3px;
}

.ui-menu .ui-menu-item {
    margin: 0;
    padding: 0;
    zoom: 1;
    float: left;
    clear: left;
    width: 100%;
}

.ui-menu .ui-menu-item a {
    text-decoration: none;
    display: block;
    padding: .2em .4em;
    line-height: 1.5;
    zoom: 1;
}

.ui-menu .ui-menu-item a.ui-state-hover,
.ui-menu .ui-menu-item a.ui-state-active {
    font-weight: normal;
    margin: -1px;
}

/*
 * jQuery UI Button @VERSION
 *
 * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Button#theming
 */
.ui-button {
    display: inline-block;
    position: relative;
    padding: 0;
    margin-right: .1em;
    text-decoration: none !important;
    cursor: pointer;
    text-align: center;
    zoom: 1;
    overflow: visible;
}

/* the overflow property removes extra width in IE */
.ui-button-icon-only {
    width: 2.2em;
}

/* to make room for the icon, a width needs to be set here */
button.ui-button-icon-only {
    width: 2.4em;
}

/* button elements seem to need a little more width */
.ui-button-icons-only {
    width: 3.4em;
}

button.ui-button-icons-only {
    width: 3.7em;
}

/*button text element */
.ui-button .ui-button-text {
    display: block;
    line-height: 1.4;
}

.ui-button-text-only .ui-button-text {
    padding: .4em 1em;
}

.ui-button-icon-only .ui-button-text, .ui-button-icons-only .ui-button-text {
    padding: .4em;
    text-indent: -9999999px;
}

.ui-button-text-icon-primary .ui-button-text, .ui-button-text-icons .ui-button-text {
    padding: .4em 1em .4em 2.1em;
}

.ui-button-text-icon-secondary .ui-button-text, .ui-button-text-icons .ui-button-text {
    padding: .4em 2.1em .4em 1em;
}

.ui-button-text-icons .ui-button-text {
    padding-left: 2.1em;
    padding-right: 2.1em;
}

/* no icon support for input elements, provide padding by default */
input.ui-button {
    padding: .4em 1em;
}

/*button icon element(s) */
.ui-button-icon-only .ui-icon, .ui-button-text-icon-primary .ui-icon, .ui-button-text-icon-secondary .ui-icon, .ui-button-text-icons .ui-icon, .ui-button-icons-only .ui-icon {
    position: absolute;
    top: 50%;
    margin-top: -8px;
}

.ui-button-icon-only .ui-icon {
    left: 50%;
    margin-left: -8px;
}

.ui-button-text-icon-primary .ui-button-icon-primary, .ui-button-text-icons .ui-button-icon-primary, .ui-button-icons-only .ui-button-icon-primary {
    left: .5em;
}

.ui-button-text-icon-secondary .ui-button-icon-secondary, .ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary {
    right: .5em;
}

.ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary {
    right: .5em;
}

/*button sets*/
.ui-buttonset {
    margin-right: 7px;
}

.ui-buttonset .ui-button {
    margin-left: 0;
    margin-right: -.3em;
}

/* workarounds */
button.ui-button::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/* reset extra padding in Firefox */
/*
 * jQuery UI Dialog @VERSION
 *
 * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Dialog#theming
 */
.ui-dialog {
    position: absolute;
    padding: .2em;
    width: 300px;
    overflow: hidden;
}

.ui-dialog .ui-dialog-titlebar {
    padding: .5em 1em .3em;
    position: relative;
}

.ui-dialog .ui-dialog-title {
    float: left;
    margin: .1em 16px .2em 0;
}

.ui-dialog .ui-dialog-titlebar-close {
    position: absolute;
    right: .3em;
    top: 50%;
    width: 19px;
    margin: -10px 0 0 0;
    padding: 1px;
    height: 18px;
}

.ui-dialog .ui-dialog-titlebar-close span {
    display: block;
    margin: 1px;
}

.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus {
    padding: 0;
}

.ui-dialog .ui-dialog-content {
    position: relative;
    border: 0;
    padding: .5em 1em;
    background: none;
    overflow: auto;
    zoom: 1;
}

.ui-dialog .ui-dialog-buttonpane {
    text-align: left;
    border-width: 1px 0 0 0;
    background-image: none;
    margin: .5em 0 0 0;
    padding: .3em 1em .5em .4em;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
    float: right;
}

.ui-dialog .ui-dialog-buttonpane button {
    margin: .5em .4em .5em 0;
    cursor: pointer;
}

.ui-dialog .ui-resizable-se {
    width: 14px;
    height: 14px;
    right: 3px;
    bottom: 3px;
}

.ui-draggable .ui-dialog-titlebar {
    cursor: move;
}

/*
 * jQuery UI Slider @VERSION
 *
 * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Slider#theming
 */
.ui-slider {
    position: relative;
    text-align: left;
}

.ui-slider .ui-slider-handle {
    position: absolute;
    z-index: 2;
    width: 1.2em;
    height: 1.2em;
    cursor: default;
}

.ui-slider .ui-slider-range {
    position: absolute;
    z-index: 1;
    font-size: .7em;
    display: block;
    border: 0;
    background-position: 0 0;
}

.ui-slider-horizontal {
    height: .8em;
}

.ui-slider-horizontal .ui-slider-handle {
    top: -.3em;
    margin-left: -.6em;
}

.ui-slider-horizontal .ui-slider-range {
    top: 0;
    height: 100%;
}

.ui-slider-horizontal .ui-slider-range-min {
    left: 0;
}

.ui-slider-horizontal .ui-slider-range-max {
    right: 0;
}

.ui-slider-vertical {
    width: .8em;
    height: 100px;
}

.ui-slider-vertical .ui-slider-handle {
    left: -.3em;
    margin-left: 0;
    margin-bottom: -.6em;
}

.ui-slider-vertical .ui-slider-range {
    left: 0;
    width: 100%;
}

.ui-slider-vertical .ui-slider-range-min {
    bottom: 0;
}

.ui-slider-vertical .ui-slider-range-max {
    top: 0;
}

/*
 * jQuery UI Tabs @VERSION
 *
 * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Tabs#theming
 */
.ui-tabs {
    position: relative;
    padding: .2em;
    zoom: 1;
}

/* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
.ui-tabs .ui-tabs-nav {
    margin: 0;
    padding: .2em .2em 0;
}

.ui-tabs .ui-tabs-nav li {
    list-style: none;
    float: left;
    position: relative;
    top: 1px;
    margin: 0 .2em 1px 0;
    border-bottom: 0 !important;
    padding: 0;
    white-space: nowrap;
}

.ui-tabs .ui-tabs-nav li a {
    float: left;
    padding: .5em 1em;
    text-decoration: none;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-selected {
    margin-bottom: 0;
    padding-bottom: 1px;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a {
    cursor: text;
}

.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a {
    cursor: pointer;
}

/* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
.ui-tabs .ui-tabs-panel {
    display: block;
    border-width: 0;
    padding: 1em 1.4em;
    background: none;
}

.ui-tabs .ui-tabs-hide {
    display: none !important;
}

/*
 * jQuery UI Datepicker @VERSION
 *
 * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Datepicker#theming
 */
.ui-datepicker {
    width: 17em;
    padding: .2em .2em 0;
}

.ui-datepicker .ui-datepicker-header {
    position: relative;
    padding: .2em 0;
}

.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
    position: absolute;
    top: 2px;
    width: 1.8em;
    height: 1.8em;
}

.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover {
    top: 1px;
}

.ui-datepicker .ui-datepicker-prev {
    left: 2px;
}

.ui-datepicker .ui-datepicker-next {
    right: 2px;
}

.ui-datepicker .ui-datepicker-prev-hover {
    left: 1px;
}

.ui-datepicker .ui-datepicker-next-hover {
    right: 1px;
}

.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -8px;
    top: 50%;
    margin-top: -8px;
}

.ui-datepicker .ui-datepicker-title {
    margin: 0 2.3em;
    line-height: 1.8em;
    text-align: center;
}

.ui-datepicker .ui-datepicker-title select {
    font-size: 1em;
    margin: 1px 0;
}

.ui-datepicker select.ui-datepicker-month-year {
    width: 100%;
}

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
    width: 49%;
}

.ui-datepicker table {
    width: 100%;
    font-size: .9em;
    border-collapse: collapse;
    margin: 0 0 .4em;
}

.ui-datepicker th {
    padding: .7em .3em;
    text-align: center;
    font-weight: bold;
    border: 0;
}

.ui-datepicker td {
    border: 0;
    padding: 1px;
}

.ui-datepicker td span, .ui-datepicker td a {
    display: block;
    padding: .2em;
    text-align: right;
    text-decoration: none;
}

.ui-datepicker .ui-datepicker-buttonpane {
    background-image: none;
    margin: .7em 0 0 0;
    padding: 0 .2em;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
}

.ui-datepicker .ui-datepicker-buttonpane button {
    float: right;
    margin: .5em .2em .4em;
    cursor: pointer;
    padding: .2em .6em .3em .6em;
    width: auto;
    overflow: visible;
}

.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
    float: left;
}

/* with multiple calendars */
.ui-datepicker.ui-datepicker-multi {
    width: auto;
}

.ui-datepicker-multi .ui-datepicker-group {
    float: left;
}

.ui-datepicker-multi .ui-datepicker-group table {
    width: 95%;
    margin: 0 auto .4em;
}

.ui-datepicker-multi-2 .ui-datepicker-group {
    width: 50%;
}

.ui-datepicker-multi-3 .ui-datepicker-group {
    width: 33.3%;
}

.ui-datepicker-multi-4 .ui-datepicker-group {
    width: 25%;
}

.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header {
    border-left-width: 0;
}

.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
    border-left-width: 0;
}

.ui-datepicker-multi .ui-datepicker-buttonpane {
    clear: left;
}

.ui-datepicker-row-break {
    clear: both;
    width: 100%;
}

/* Calendar Button and Image */
.view-calendar button {
    background: url(images/cal.gif) no-repeat !important;
    display: inline-block;
    border: none;
    vertical-align: center;
    margin-top: 3px;
    margin-left: 6px;
    height: 22px;
}

/* css for timepicker */
.ui-timepicker-div .ui-widget-header {
    margin-bottom: 8px;
}

.ui-timepicker-div dl {
    text-align: left;
}

.ui-timepicker-div dl dt {
    height: 25px;
    margin-bottom: -25px;
}

.ui-timepicker-div dl dd {
    margin: 0 10px 10px 65px;
}

.ui-timepicker-div td {
    font-size: 90%;
}

.ui-tpicker-grid-label {
    background: none;
    border: none;
    margin: 0;
    padding: 0;
}

/* RTL support */
.ui-datepicker-rtl {
    direction: rtl;
}

.ui-datepicker-rtl .ui-datepicker-prev {
    right: 2px;
    left: auto;
}

.ui-datepicker-rtl .ui-datepicker-next {
    left: 2px;
    right: auto;
}

.ui-datepicker-rtl .ui-datepicker-prev:hover {
    right: 1px;
    left: auto;
}

.ui-datepicker-rtl .ui-datepicker-next:hover {
    left: 1px;
    right: auto;
}

.ui-datepicker-rtl .ui-datepicker-buttonpane {
    clear: right;
}

.ui-datepicker-rtl .ui-datepicker-buttonpane button {
    float: left;
}

.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current {
    float: right;
}

.ui-datepicker-rtl .ui-datepicker-group {
    float: right;
}

.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header {
    border-right-width: 0;
    border-left-width: 1px;
}

.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
    border-right-width: 0;
    border-left-width: 1px;
}

#wait-spinner {
    z-index: 50000;
    position: absolute;
}

#wait-spinner-image {
    height: 45px;
    width: 45px;
    background-repeat: no-repeat;
    background-image: url(/images/spinner.gif);
}

/*=================== For the quickadd page =================================*/
.quickaddall {
    float: right;
    padding-bottom: 1em;
    padding-top: 1em;
}

.quickaddtable {
    clear: both;
}

.quickaddtable span {
    display: inline;
    float: left;
    border-right: 1px solid #BBBBBB;
    border-top: 1px solid #BBBBBB;
    margin: 0px;
    padding: 3px;
}

.quickaddtable p {
    clear: left;
    margin: 0px;
    padding: 0px;
    height: 100% !important;
    height: 1em;
}

.quickaddtable span.pid {
    width: 10%;
}

.quickaddtable span.name {
    width: 50%;
    text-align: left;
}

.quickaddtable span.listPrice {
    width: 10%
}

.quickaddtable span.totalPrice {
    width: 10%
}

.quickaddtable span.qty {
    width: 10%
}

/* IE6 IFRAME FIX (taken from datepicker 1.5.3 */
.ui-datepicker-cover {
    display: none; /*sorry for IE5*/
    display /**/: block; /*sorry for IE5*/
    position: absolute; /*must have*/
    z-index: -1; /*must have*/
    filter: mask(); /*must have*/
    top: -4px; /*must have*/
    left: -4px; /*must have*/
    width: 200px; /*must have*/
    height: 200px; /*must have*/
}

/*
 * jQuery UI Progressbar @VERSION
 *
 * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Progressbar#theming
 */
.ui-progressbar {
    height: 2em;
    text-align: left;
}

.ui-progressbar .ui-progressbar-value {
    margin: -1px;
    height: 100%;
}