/* siteLayout.css - styles specific to the SiteLayout.Master page */

/*
    Note: When you specify the width and height properties of an element with CSS,
    you are just setting the width and height of the content area. To know the full size
    of the element, you must also add the padding, border and margin.

    Because of the broken box model in Internet Explorer 6 and earlier it is advisable to
    avoid horizontal margins, padding and borders on elements with a specified width.
*/

/* -- LAYOUT -- */
/* 1) http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page */

html, body#master-body
{
    /* 1 */
    height: 100%;
    padding-left: 1em;
    padding-right: 1em;
}

.master-container
{
    /* 1 */
    min-height: 100%; /* http://weblog.bridgew.edu/ruthsarian/2008/08/27/min-height/ */
    position: relative; /* needed for footer positioning*/
    margin: 0 auto 0 auto; /* this centers the container in standards browsers */
    max-width: 1300px; /* this controls the minimum width for standards browsers */
}

.min-width-normal
{
    min-width: 900px; /* this controls the minimum width for standards browsers */
}

.min-width-wide
{
    min-width: 1050px; 
}

.master-container form
{
}

div#master-header
{
    /* 1 */
    width: 100%;
    float: left;
    height: 5em;
    border-bottom: solid 3px #808080;

    padding-top: 1em;
}

div#master-header .logo
{
    width: 25%;
    float: left;
}

div#master-page
{
    /* 1 */
    padding-bottom: 4em; /* Height of the footer + 1 em. */
    width: 100%;
    clear: both;
}

div#master-footer
{
    /* 1 */
    position: absolute;
    bottom: 0px; /* stick to bottom */
    left: 0em;
    width: 100%;
    height: 3em; /* Height of the footer */
}

div#master-main-navigation
{
    clear: both;
    height: 2em;
}

div#master-main-navigation-contents
{
    position: absolute;
    left: 0em;
    top: 6.3em;
    z-index: 200; /* IE6,7 fix */
}

div#master-page-box
{
    padding-top: 1em;
}

div.master-left-sidebar
{
    float: left;
    width: 17em;
    min-height: 50%;
}

div.master-right-sidebar
{
    float: right;
    width: 18em;
    min-height: 50%;
}

div.master-left-sidebar-contents
{
    width: 17em;
    position: absolute;
    top: 9em;
    left: 1em;
}

div.master-right-sidebar-contents
{
    width: 18em;
    position: absolute;
    top: 9em;
    right: 0em;
}

/* Use this style on the master contents container if the left sidebar is visible. */
div.master-contents-left
{
    margin-left: 19em; /* master-left-sidebar width and horizontal margin  */
}

/* Use this style on the master contents container if the right sidebar is visible. */
div.master-contents-right
{
    margin-right: 19em; /* master-right-sidebarwidth and horzontal margin */
}

div.master-contents
{
    float: left;
    width: 100%;
}

/* -- HEADER -- */

div#master-header-contents
{
    position: absolute;
    top: 1em;
    left: 25%;
    width: 75%;
}

div#master-header-contents .center-vertically img
{
    vertical-align: middle;
}

div#master-header-contents .horizontal-menu-right
{
    float: none;
    margin-bottom: 0.5em;
    margin-right: 0.8em; /* Padding-right for form (1em) - padding-right for horizontal-menu li (0.2em) */
    white-space: nowrap;
}

div#master-header-contents ul.horizontal-menu ul, div#master-header-contents ul.horizontal-menu li, div#master-header-contents ul.horizontal-menu li span, div#master-header-contents ul.horizontal-menu li a
{
    white-space: normal;
}

/* -- CART -- */

.master-cart img
{
    margin-top: -5px;
}

/* -- SEARCH -- */

.master-search .text
{
    width: 10em;
    font-size: 12px;
    margin-left: 1em;
    margin-right: 0.3em;
}

/* -- FOOTER -- */

div#master-footer-box
{
    margin: 0em 1em 0em 0em;
    border-top: medium solid #808080;
    color: #808080;
}

div#master-footer li
{
    font-size: 0.8em;
}

div#master-footer .horizontal-menu-right
{
    width: 72%;
}
div#master-footer ul.horizontal-menu li a
{
    color: #808080;
    text-decoration: none;
    font-weight: normal;
}
div#master-footer ul.horizontal-menu li span
{
    color: #808080;
    font-weight: normal;
}
div#master-footer ul.horizontal-menu li a:hover
{
    color: #000000;
    text-decoration: none;
}


/* -- PURE CSS MENU -- */

ul.pureCssMenu
{
    /*float: left;     position: relative;*/
}
ul.pureCssMenu, ul.pureCssMenu ul
{
    line-height: normal;
    margin: 0px;
    list-style: none;
    padding: 0px 2px 2px 0px;
    background-color: #ffffff;
    background-repeat: repeat;
}
ul.pureCssMenu ul
{
    /* width: 250px; */
    border: solid 1px #808080;
    display: none;
    position: absolute;
    left: -1px; /* position second-level menu beneath menubar button */
    top: 97%;
    z-index: 100;
}
ul.pureCssMenu li:hover > ul
{
    display: block;
}
ul.pureCssMenu ul ul
{
    position: absolute;
    left: 99%; /* position third-level+ menu to left of current menu */
    top: -2px;
}

ul.pureCssMenu a:hover ul, ul.pureCssMenu a:hover a:hover ul, ul.pureCssMenu a:hover a:hover a:hover ul
{
    display: block;
}
ul.pureCssMenu a:hover ul ul, ul.pureCssMenu a:hover a:hover ul ul
{
    display: none;
}

ul.pureCssMenu li
{
    display: block;
    margin: 2px 0px 0px 11px;
    font-size: 0px; /* IE fix */ /*width: 100px;*/
}
ul.pureCssMenu li li
{
    width: auto;
    margin: 2px 0px 0px 2px;
}
ul.pureCssMenu li
{
    float: left;
}
ul.pureCssMenu ul li
{
    float: none;
}
ul.pureCssMenu li:hover
{
    position: relative;
}

ul.pureCssMenu a
{
    display: block;
    vertical-align: middle;
    background-color: #ffffff;
    border: solid 1px #ffffff;
    text-align: left;
    text-decoration: none;
    padding: 4px;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
}
ul.pureCssMenu a:link,
ul.pureCssMenu a:visited,
ul.pureCssMenu li a.nolink
{
    color: #444444;
}
ul.pureCssMenu li a.nolink:hover
{
    cursor: default; /*color: #444444;*/
}

ul.pureCssMenu ul a
{
    text-align: left;
    white-space: nowrap;
    margin-right: 0.5em;
    padding-right: 1.2em;
}

ul.pureCssMenu li:hover > a
{
    background-color: #FFFFFF;
    border: solid 1px #808080;
    color: #FF0000;
    text-decoration: none;
}

ul.pureCssMenu li li:hover > a
{
    border: solid 1px #ffffff;
}

ul.pureCssMenu li a:hover
{
    position: relative;
    border: solid 1px #808080;
    color: #FF0000;
    text-decoration: none;
}

ul.pureCssMenu li li a:hover
{
    border: solid 1px #ffffff;
}

ul.pureCssMenu span
{
    /*overflow: hidden;*/
}

ul.pureCssMenu a.parent
{
    display: block;
    background-image: url(../images/arrowdown.gif);
    background-position: right center;
    background-repeat: no-repeat;
    padding-right: 21px;
}
ul.pureCssMenu ul a.parent
{
    background-image: url(../images/arrow_double_1.gif);
}

ul.pureCssMenu img
{
    border: none;
    float: left;
    margin-right: 4px;
    width: 16px;
    height: 16px;
}
ul.pureCssMenu ul img
{
    width: 16px;
    height: 16px;
}

ul.pureCssMenu table
{
    border-collapse: collapse;
}


@media print
{   
    html, body#master-body
    {
        height: auto;
    }
    
    .master-container
    {
        position: static;
    }
    
    .master-container form
    {
        padding-left: 0em;
        padding-right: 0em;
    }
    
    div#master-header
    {
        float: none;
        padding-top: 0;
    }
    
    div#master-header .logo
    {
        float: none;
    }

    div#master-page
    {
        padding-bottom: 0em;
    }

    div#master-footer
    {
        display: none;
    }
    
    div.master-contents
    {
        float: none;
    }
    
    div.master-left-sidebar,
    div.master-right-sidebar
    {
        display: none;
    }

    div.master-contents-left,
    div.master-contents-right
    {
        margin-left: 0;
        margin-right: 0;
    }
    
    div#master-header-contents
    {
        display: none;
    }
    
    div#master-main-navigation
    {
        display: none;
    }
    
    div#master-main-navigation-contents
    {
        display: none;
    }
    
    div.master-left-sidebar-contents
    {
        display: none;
    }

    div.master-right-sidebar-contents
    {
        position: static;
        width: auto;
        border-top: solid 1px #EBEBEB;
        margin-top: 1em;
    }    

    div.master-right-sidebar-contents .contact-us
    {
        width: 18em;
    }    

    .related-links
    {
        display: none;
    }
    
    .contact-us
    {
        display: block;
    }
}