/* define styles for the customer here

example:
.MPStyle_BigRed
{
    font-face: Arial;
    font-size: 24px;
    font-weight: bold;
    color: #ff0000;
}
*/

.MPStyle_ImgAlignLeft, .MPStyle_Footer p
{
    margin: 0 40px 20px 0;
}

.MPStyle_Footer, .MPStyle_Footer p
{
    font-family: Arial;
    font-size: 11px;
    line-height: 15px;
    color: #a49461;
}

strong
  {
    font-weight: bold;
  }

A.Footer
{
    font-family: Arial;
    font-size: 11px;
    line-height: 15px;
    color: #998c62;
}


/* customer colors, always include black and white */
.MPColor_000000 {}
.MPColor_ffffff {}


#marketpath_body
{
    margin: 0;
    padding: 0;
    overflow: auto;
    background-color: #000000;
}

/* define the default styles to be used
   - .default is selected by the customer as "Normal" in the style dropdown
   - i usually include p, td, ul, and li also...
 */
.default, p, td, ul, li, body
{
    font-family: Georgia, Serif;
    font-size: 12px;
    line-height: 20px;
    font-weight: lighter;
    color: #2d2209;
    margin: 0;
}


/* heading styles, you can specify up to h4 */
h1
{
    padding: 0px;
    margin-bottom: 18px;
    font-family: Georgia, Serif;
    font-weight: bold;
    font-size: 18px;
    text-transform: uppercase;
    color: #2d2209;    
}

h2
{
    padding: 0px;
    margin-bottom: 18px;
    font-family: Arial;
    font-weight: Georgia, Serif;
    font-size: 16px;
    color: #000000;  
}

h3
{
    padding: 0px;
    margin: 0px;
    font-family: Georgia, Serif;
    font-size: 14px;
    color: #555555;
}

/* link styles */
a
{
    color: #0000ff;
    text-decoration: none;
}

a:hover
{
    text-decoration: underline;
}

.input {
    background: url(http://www.harrypotterwallart.com/images/8105/input-field.png) no-repeat;
    padding: 8px 0px 0px 8px;
    border: 0px;
    width: 164px;
    height: 38px;
    color: #dbd1af;
    font-family: Georgia, Serif;
    font-size: 15px;
}

/* generic table styles, i always turn off padding and spacing and vertically align to the top */
table
{
    border-spacing: 0px;
    border-collapse: collapse;
}

td
{
    padding: 0;
    vertical-align: top;
}

/* now the theme elements defined in the html below */

/*  i always wrap my page in a containing table or div where i specify height, width, and background.
    this is so the styles will actually show up within the editor...
    since technically the editor itself has a body tag, we cannot place the background styles there
*/

#pageWrapper
{
    width: 100%;
    height: 100%;
    background: #000000 url(http://www.harrypotterwallart.com/images/6041/background-gradient.jpg) repeat-x;
    text-align: center;
}

#tblContainer{
    width: 1000px;
    height: 100%;
    margin: 0px auto 0px auto;
    padding: 0px;}

#tdLeftGutter{
    text-align: right;}

#tdRightGutter{
    text-align: left;}

#tdPageOuter{
    width: 900px;
    background: #000000 url(http://www.harrypotterwallart.com/images/6042/background-main.jpg) no-repeat;
    vertical-align: top;}

#tblPage{
    width: 900px;
    margin: 0px;
    padding: 0px;}

#tdBanner{
    width: 900px;
    height: 157px;
    background: url(http://www.harrypotterwallart.com/images/7213/harry-potter-wall-art-header.jpg) no-repeat;
    padding: 0px;
}

#tdMenu{
    }

#tdPage{
    width: 900px;
    padding: 0px;
    margin: 0px;
    vertical-align: top;
    background-image: url(http://www.harrypotterwallart.com/images/6043/background-tile.jpg);
    background-color: #c3b588;
    background-repeat: repeat-y;
    background-position: 0px 53px;}

#divContentWrapper{
    width: 900px;
    height: 100%;
    padding: 0px;
    margin: 0px;
    background-image: url(http://www.harrypotterwallart.com/images/6044/background-tile-top.jpg);
    background-repeat: no-repeat;
    background-position: 0px 0px;
}

#divPageContent{
    width: 100%;
    height: 100%;
    padding: 0px 8px 0px 8px;}

#tdFooter{
    height: 43px;
    background-image: url(http://www.harrypotterwallart.com/images/6045/footer.png);
    background-repeat: no-repeat;
    padding: 30px 15px 15px 15px;
}


/* menu styles from the menu xml below... */
.MenuItem
{
    font-family: Arial;
    font-size: 14px;
    color: #555555;
    cursor: pointer;
    text-decoration: none;   
}

.MenuItemOver
{
    font-family: Arial;
    font-size: 14px;
    color: #000000;
    cursor: pointer;
    text-decoration: underline;
}


/**************************** REQUIRED BY ALL **************************************/

                 
                /* make the second level visible when hover on first level list OR link */
                #TopMenu ul li:hover ul,#TopMenu ul li:hover ul,
                #TopMenu ul a:hover ul,#TopMenu ul a:hover ul{visibility:visible; }

                /* keep the third level hidden when you hover on first level list OR link */
                #TopMenu ul :hover ul ul,#TopMenu ul :hover ul ul{visibility:hidden;}

                /* make the third level visible when you hover over second level list OR link */
                #TopMenu ul :hover ul :hover ul,#TopMenu ul :hover ul :hover ul{ visibility:visible;}
                /**************************************************************************************/
                    #TopMenu {float: left; z-index:100;}

                /* remove all the bullets, borders and padding from the default list styling */
                    #TopMenu ul {padding: 0px;margin: 84px 0px 0px 30px; list-style-type:none; z-index: 100; }
                    

                /* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */

                    #TopMenu li {float: left; position: relative; margin: 0px; padding: 5px 13px; color: #fff;}

                /* style the links for the top level */
                    #TopMenu a, #TopMenu a:visited, #TopMenu a, #TopMenu a:visited
                    {
                        display: block;
                        font-size: 16px;
                        font-family: Georgia, Serif;
                        color: #fff;
                        cursor: pointer;
                        text-decoration: none;
                    }
                /* style the top level hover */
                    #TopMenu ul li:hover, #TopMenu ul li:hover {}
                    #TopMenu a:hover, #TopMenu ul ul a:hover, #TopMenu a:hover, #TopMenu ul ul a:hover{}
                    #TopMenu :hover > a, #TopMenu ul ul :hover > a {}
                 
                /* style the second level hover */
                    #TopMenu ul ul li, #TopMenu ul ul li
                    {
                        text-align: left;
                        width: 200px;
                        margin: 0px;
                        cursor: pointer;
                        padding: 5px 5px 5px 0px;
                    }
                /* style the second level background */
                    /* reguired make the second level visible when hover on first level list OR link */
                    #TopMenu ul li:hover ul, #TopMenu ul li:hover ul,
                    #TopMenu ul a:hover ul, #TopMenu ul a:hover ul{visibility:visible; }
                    /* end requirement */
                /* hide the sub levels and give them a positon absolute so that they take up no room */
                    /* reguired keep the third level hidden when you hover on first level list OR link */
                         #TopMenu ul :hover ul ul, #TopMenu ul :hover ul ul{visibility:hidden;}
                    /* end requirement */
                    #TopMenu ul ul {
                        visibility:hidden;
                        position:absolute;
                        background: url(http://www.harrypotterwallart.com/images/21479/ul-back.jpg);
                        left: 0px;top: 30px;
                        margin: 0px; 
                        padding: 5px 0 0 0;}
                /* style the second level links */
                    #TopMenu ul ul a, #TopMenu ul ul a:visited, #TopMenu ul ul a, #TopMenu ul ul a:visited
                    {
                        display: block;
                        font-size: 12px;
                        color: #ffffff;
                        cursor: pointer;
                        text-decoration: none;
                        padding: 0px 12px;
                       }
                    #TopMenu ul ul a:hover, #TopMenu ul ul a:hover {
                        text-decoration: none;
                     }
                     #TopMenu ul ul li:hover, #TopMenu ul ul li:hover {
                     }
                    #TopMenu ul ul a:hover > #TopMenu ul ul ul a:hover, #TopMenu ul ul a:hover > #TopMenu ul ul ul a:hover {}
                    #TopMenu ul ul :hover > a, #TopMenu ul ul ul :hover > a, #TopMenu ul ul :hover > a, #TopMenu ul ul ul :hover > a {text-decoration: none;}


                /* style the third level background */
                    /* reguired make the third level visible when you hover over second level list OR link */
                        #TopMenu ul :hover ul :hover ul, #TopMenu ul :hover ul :hover ul{ visibility:visible;}
                    /* End requirement */
                    
                    #TopMenu ul ul ul a, #TopMenu ul ul ul a:visited, #TopMenu ul ul ul a, #TopMenu ul ul ul a:visited {background-color: #eeeeee; padding: 0px 10px;}
                    #TopMenu ul ul ul li { text-align: right; width: 150px;}
                /* style the third level hover */
                    #TopMenu ul ul ul a:hover, #TopMenu ul ul ul a:hover {background-color: #eeeeee;}
                /* position the third level flyout menu */
                    #TopMenu ul ul ul{visibility: hidden; left: 210px; top:0px; width:149px;}
                    #TopMenu ul ul ul{visibility: hidden; left: -149px; top:0px; width:149px; padding: 0px;}
                    
                /* persists,first,last */
                
                    
/* End Default Menu */
ul#HPCategoryList
{
    list-style-type:none;
    padding: 0px;
    background: transparent;
}
ul#HPCategoryList li
{
    float: left;
    width: 240px;
    text-align: center;
    background: transparent;
    padding: 4px 0;
    height: 24px;
}
ul#HPCategoryList li a
{
    color: #e4dbb7;
    font-size: 18px;
}
.CategoryItem
{
    float: left;
    height: 260px;
    width: 180px;
}
.CategoryItemImg
{
    border: 3px solid #70602C;
    background: #fff;
    width: 150px;
    height: 150px;
    text-align: center;
}

#inputSearch
{
    padding: 8px 0px 0px 8px;
    margin: 0px 0px 0px 35px;
    border: 0px;
    width: 164px;
    height: 38px;
    color: #dbd1af;
    font-family: Georgia, Serif;
    font-size: 15px;
    background: url(http://www.harrypotterwallart.com/images/6344/input-field.png) no-repeat;
}


#radioPaymentMethodBillMeLater { display: none; }