﻿
a:link
{
    color: #606060;
    text-decoration: none;
}
a:visited
{
    color: #606060;
    text-decoration: none;
}

a:hover
{
    color: #C0C0C0;
    text-decoration: none;
}

img
{
    text-decoration: none;
    border-style: none;
}

#Page
{
    width: 950px;
    height: auto;
    margin-right: auto;
    margin-left: auto;
    font-family: Gill Sans MT, Georgia, Book Antiqua, Century Gothic, Verdana, Tahoma, Helvatica, Arial;
    background-color: White;
}

#Wrapper
{
    position: absolute;
    top: -65px;
    width: 950px;
    height: auto;
}

#Border
{
    position: absolute;
    left: 0px;
    top: 65px;
    width: 950px;
    height: 5px;
    background-color: White;
    z-index: 1;
}

#Header
{
    position: absolute;
    left: 180px;
    top: 75px;
    width: 720px;
    height: 20px;
    color: white;
    font-size: 0.9em;
}

#Base
{
    position: absolute;
    left: 180px;
    top: 595px;
    width: 720px;
    height: 20px;
    color: white;
    font-size: 10px;
}

#Content
{
    position: absolute;
    top: 5px;
    width: 950px;
    height: 630px;
    background-color: #1D1F21;
}

#Nav
{
    width: 150px;
    height: 630px;
    background-image: url('Content/PurpleBar.png');
    float: left;
}

/*
#Nav #Current
{
    width: 20px;
    height: 170px;
    background-color: White;
    position: absolute;
    top: 95px;
    left: 0;
    font-size: 0.7em;
    color: #606060;
}

#Nav #Home
{
    width: 40px;
    height: 20px;
    position: absolute;
    top: 75px;
    left: 20px;
    font-size: 0.7em;
    color: White;
    cursor: pointer;
}
*/

#Nav #Anchors
{
    width: 100px;
    height: 190px;
    /*background-color: White;*/
    position: absolute;
    top: 75px;
    left: 20px;
    font-size: 0.7em;
    /*  color: #606060;*/
    color: White;
}

#Nav #Anchors a:link
{
    color: White;
    text-decoration: none;
}
#Nav #Anchors a:visited
{
    color: White;
    text-decoration: none;
}



#Nav p
{
    height: 20px;
    vertical-align: middle;
}

#Nav #Logo
{
    background-image: url('Content/HavvaLogo.png');
    height: 150px;
    width: 150px;
    position: absolute;
    bottom: 40px;
    cursor: pointer;
}

#Main
{
    width: 800px;
    height: 630px;
    background-color: #1D1F21;
    float: right;
}

#Main #Shoes
{
    top: 2px;
}

#Main #Accessory .Item
{
    display: inline;
    position: relative;
    margin-left: 0px;
    padding-top: 0px;
    padding-left: 0px;
    float: left;
}

#Main #Shoes .Item
{
    background: #ffffff !important;
    float: left;
    width: 157px;
    height: 185px;
    padding: 5px 5px 5px 5px;
    margin: 0px 5px 5px 0px;
}

#Main #Box #Others
{
    width: 326px;
    height: 495px;
    text-decoration: none;
    border: 0;
    float: right;
    position: absolute;
    left: 410px;
    top: 2px;
}

#Main #Box #Others .Item
{
    width: 317px;
    height: 160px;
    display: block;
    position: relative;
    margin-left: 8px;
    padding-top: 3px;
    padding-left: 0px;
    float: left;
}

#Main #Box #Others .Description
{
    width: 315px;
    height: 270px;
    display: block;
    position: relative;
    margin: 0px 0px 0px 10px;
    padding-top: 5px;
    float: left;
    top: 28px;
    font-size: 12px;
    color: #FFFFFF;
}

#Main #Box #Others .Information
{
    width: 315px;
    height: 20px;
    display: block;
    position: relative;
    margin: 0px 0px 0px 10px;
    padding-top: 2px;
    float: left;
    top: 28px;
    font-size: 12px;
    color: #FFFFFF;
    text-align: right;
}


#Main #Box #Others .Item a:link
{
    display: inline;
}


#Main #Box #ShoeDetail
{
    width: 480px;
    height: 495px;
    overflow: hidden;
    position: relative;
}

#Main #Box #ShoeDetail #BigShoe
{
    width: 411px;
    /* height: 326px; */
    height: 480px;
    position: relative;
}

#Main #Box #ShoeDetail #ShoeData
{
    width: 470px;
    height: 163px;
    position: absolute;
    top: 326px;
    padding-left: 10px;
}


#Main #Box #ShoeDetail #BigShoe img
{
    padding: 5px 0px 0px 4px;
}

.ItemImage
{
    padding: 3px 3px 3px 3px;
}


#Main #Box
{
    width: 720px;
    height: 495px;
    background-color: #1D1F21;
    position: relative;
    top: 95px;
    left: 30px;
    font-size: 0.7em;
    color: #606060;
    float: left;
}

#Main #Box #Rotator
{
    width: 495px;
    height: 495px;
    overflow: hidden;
    position: relative;
}

#Main #Box #Rotator #One
{
    width: 495px;
    height: 495px;
    overflow: hidden;
    position: relative;
    background-image: url('Content/Home/DSC_0288f.jpg');
}
#Main #Box #Rotator #One-5
{
    width: 495px;
    height: 495px;
    overflow: hidden;
    position: relative;
    background-image: url('Content/Home/HAVVA1.jpg');
}

#Main #Box #Rotator #Two
{
    width: 495px;
    height: 495px;
    overflow: hidden;
    position: relative;
    background-image: url('Content/Home/DSC_0326f.jpg');
}
#Main #Box #Rotator #Two-5
{
    width: 495px;
    height: 495px;
    overflow: hidden;
    position: relative;
    background-image: url('Content/Home/HAVVA2.jpg');
}

#Main #Box #Rotator #Three
{
    width: 495px;
    height: 495px;
    overflow: hidden;
    position: relative;
    background-image: url('Content/Home/DSC_0332ff.jpg');
}
#Main #Box #Rotator #Three-5
{
    width: 495px;
    height: 495px;
    overflow: hidden;
    position: relative;
    background-image: url('Content/Home/DSC_0277 copy.jpg');
}

#AboutPage {
    width: 670px;
    height: 445px;
    overflow: hidden;
    position: relative;
    background-image: url('Content/AboutPage.jpg');
}

#AvailabilityPage {
    width: 720px;
    height: 495px;
    overflow: hidden;
    position: relative;
    background-image: url('Content/AvailabilityHolding.png');
}

#CollectionHolding {
    width: 720px;
    height: 495px;
    overflow: hidden;
    position: relative;
    background-image: url('Content/CollectionHolding.png');
}

#Main #Box #Rotator img
{
    width: 495px;
    height: 495px;
    text-decoration: none;
    border: 0;
}

#Main #Box #Static
{
    width: 720px;
    height: 495px;
    background-image: url('Content/StaticBox.png');
    position: absolute;
    top: 0;
    left: 0;
}

#Main #Box #Static #Text
{
    width: 710px;
    height: 485px;
    position: absolute;
    top: 0;
    left: 0;
    margin: 5px 5px 5px 5px;
    overflow: scroll;
    overflow-y: scroll;
    overflow-x: hidden;
}

#Main #Box #Static #TextLeft
{
    width: 400px;
    height: 485px;
    position: absolute;
    top: 0;
    left: 0;
    float: left;
    margin: 5px 5px 5px 5px;
}

#Main #Box #Static #TextLeft p
{
    margin: 0px 0px 0px 10px;
    padding: 0px 0px 0px 0px;
}

#Main #Box #Static #TextLeft h2
{
    margin: 10px 0px 10px 10px;
    padding: 0px 0px 0px 0px;
}

#Main #Box #Static #TextRight
{
    width: 310px;
    height: 485px;
    position: absolute;
    top: 0;
    left: 400px;
    float: right;
    margin: 5px 5px 5px 5px;
}

#Main #Box #Static #TextRight #ContactImage
{
    width: 308px;
    height: 485px;
    background-image: url('Content/ContactImage.png');
}

#MyForm
{
    width: 400px;
    height: 485px;
    position: absolute;
    top: 15%;
}

#Main #Box #Static p
{
    padding: 5px 10px 5px 10px;
}

#Main #RightNav
{
    width: 225px;
    height: 495px;
    text-decoration: none;
    border: 0;
    float: right;
    position: absolute;
    left: 495px;
    top: 0;
    cursor: pointer;
}

.HomeCollection
{
    width: 225px;
    height: 165px;
    background-image: url('Content/HomeCollection.png');
    text-align: right;
    position: relative;
    cursor: pointer;
}

.HomePress
{
    width: 225px;
    height: 165px;
    background-image: url('Content/HomePress.png');
    text-align: right;
    position: relative;
    cursor: pointer;
}

.HomeAbout
{
    width: 225px;
    height: 165px;
    background-image: url('Content/HomeAbout.png');
    text-align: right;
    position: relative;
    cursor: pointer;
}

#RightNav .Text
{
    width: 220px;
    height: 30px;
    text-align: right;
    position: absolute;
    top: 135px;
    right: 5px;
    font-size: 2.0em;
    font-weight: bold;
    font-family: Helvatica;
}

#Footer
{
    position: absolute;
    top: 640px;
    font-size: 0.7em;
    color: #606060;
}

#Rights
{
    width: 600px;
    float: left;
    text-align: left;
    font-weight: normal;
}

/* - - - - - - - - - - - STEP CAROUSEL - - - - - - - - - - - */

.stepcarousel
{
    position: relative; /*leave this value alone*/
    border: 10px solid white;
    overflow: scroll; /*leave this value alone*/
    width: 690px; /*Width of Carousel Viewer itself*/
    height: 465px; /*Height should enough to fit largest content's height*/
}

.stepcarousel .belt
{
    position: absolute; /*leave this value alone*/
    left: 0;
    top: 0;
}

.stepcarousel .panel
{
    font-size: 10px;
    float: left; /*leave this value alone*/
    overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
    margin: 10px; /*margin around each panel*/
    width: 690px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}


.stepcarousel .panel .aboutCopy {
    width: 377px;
    height: 455px;
    float: left;
    font-size: 11px;
}

.stepcarousel .panel #aboutImageTwo {
    width: 298px;
    height: 455px;
    float: right;
    background-image: url('Content/AboutTwo.jpg');
}

.stepcarousel .panel #aboutImageOne {
    width: 298px;
    height: 455px;
    float: right;
    background-image: url('Content/AboutOne.jpg');
}


/* - - - - - - - - - - - CONTACT FORM - - - - - - - - - - - */

#ContactForm span
{
    color: #1D1F21;
}

#ContactForm input
{
    height: 20px;
    width: 290px;
    font-size: 10px;
    color: black;
    vertical-align: middle;
    font-family: Tahoma, sans-serif;
    border: 1px solid #D8D8D8;
    background-color: #EAEAEA;
}

#ContactForm .Button
{
    height: 20px;
    width: 40px;
    font-size: 10px;
    color: black;
    vertical-align: middle;
    font-family: Tahoma, sans-serif;
    border: 1px solid #D8D8D8;
}

#ContactForm textarea
{
    width: 280px;
    height: 120px;
    border: 1px solid #D8D8D8;
    padding: 5px;
    font-family: Tahoma, sans-serif;
    background-image: url('Content/FormCopy.png');
    background-position: bottom right;
    background-repeat: no-repeat;
}

#ContactForm div
{
    color: Grey;
    font-weight: bold;
}

/* - - - - - - - - - - - PRESS RELEASES - - - - - - - - - - - */
#PressIndex
{
    width: 217px;
    height: 485px;
    overflow: auto;
    text-decoration: none;
    border: 1px solid #1D1F21;
    float: right;
    position: absolute;
    left: 490px;
    top: 0;
}

#PressIndex p
{
    font-size: 1.4em;
}

.PressRelease
{
    position: relative; /*leave this value alone*/
    overflow: scroll; /*leave this value alone*/
    width: 485px; /*Width of Carousel Viewer itself*/
    height: 485px; /*Height should enough to fit largest content's height*/
    border: 1px solid #1D1F21;
}

#PressRelease .PressBelt
{
    position: absolute; /*leave this value alone*/
    left: 0;
    top: 0;
}

#PressRelease .PressPanel
{
    float: left; /*leave this value alone*/
    overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
    margin: 10px; /*margin around each panel*/
    width: 475px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}

.PressPanelScroll
{
    overflow: auto;
    width: 475px;
    height: 475px;
}

/* - - - - - - - - - - - MOJO MAGNIFY - - - - - - - - - - - */
div.mojomagnify_zoom
{
    position: absolute;
    width: 160px;
    height: 160px;
    overflow: hidden;
    cursor: crosshair;
}



div.mojomagnify_border
{
    position: absolute;
    border: 2px solid black;
    width: 156px;
    height: 156px;
}


img.mojomagnify_img
{
    padding: 0px;
    border: 0px;
}

div.mojomagnify_zoom a
{
    cursor: crosshair;
}

