/*
      Project:  Onyx Salon
        Title:  Master styles for screen media
       Author:  Adam Page, adam@atomdriven.com
      Updated:  2006-01-07
*/

/*____[ Imports ]_____________________________________________________________*/

@import url("./fontnormal.css");

/*____[ Common elements ]_____________________________________________________*/

body
{
    margin:           0.5in 0.75in;
    padding:          0;
    font-size:        1.1em;
}

/*____[ Hidden elements ]_____________________________________________________*/

#divHead a,
#divNav,
#divLocation ul,
hr,
.noprint
{
    display:          none;
}

acronym
{
    border:           0;
}

/*____[ Header ]______________________________________________________________*/

#divHead h1
{
    margin:           0;
    padding:          0;
    float:            left;
    letter-spacing:   0.5em;
    font-variant:     small-caps;
}

#divLocation p
{
    text-align:       right;
    font-size:        0.8em;
}

#divImageFade
{
    text-align:       center;
}

/*____[ Content ]_____________________________________________________________*/

#content
{
    clear:            left;
}

#content h2
{
    border-top:       0.05em solid #cccccc;
    font-weight:      bold;
    letter-spacing:   0.05em;
    font-size:        2.0em;
    color:            #a73154;
    padding-top:      0.5em;
    text-align:       center;
}

#content h3
{
    font-size:        1.7em;
    line-height:      1.0em;
    font-weight:      bold;
    font-style:       italic;
    color:            #000000;
    margin:           1em 0 0.5em 0;
    text-align:       center;
    clear:            both;
}

#content p
{
    line-height:      1.8em;
    text-align:       justify;
}

/*----( About Onyx )--------------------------------------*/

#imgOnux
{
    float:           right;
    border:          0;
    margin:          0 0 0 15px;
}

#imgKevin
{
    float:           left;
    border:          0.05em solid #cccccc;
    padding:         3px;
    background:      #e9e9e9;
    margin:          5px 15px 3px 0;
}


/*----( Facilities > Image gallery )----------------------*/

#photos
{
    margin:           0 auto;
    text-align:       center;
}

#photos ul
{
    width:            550px;
    margin:           0;
    padding:          0;
    list-style:       none;
    position:         relative;
}

#photos ul li
{
    margin:           0;
    padding:          0;
    float:            left;
    margin:           5px 15px 15px 0;
}

#photos ul li a
{
    border:           0.05em solid #cccccc;
    display:          block;
    width:            123px;
    height:           123px;
    background:       #e9e9e9;
}

#photos ul li a img
{
    float:            left;
    margin:           6px;
    padding:          0;
    border:           0;
}

#content #photo_desc
{
    display:          none;
}

/*----( Menu of Services )--------------------------------*/

#menu
{
    margin:          0;
    padding-bottom:  1em;
    border-bottom:   0.05em solid #dddddd;
}

#menu table
{
    border:          0;
    padding:         0;
    margin:          0 auto;
    border-collapse: collapse;
    width:           6.5in;
    font-size:       0.87em;
}

#menu table th,
#menu table td
{
    border:          0;
}

#menu table caption,
#menu table thead th
{
    display:         none;
}

#menu table tbody th h3
{
    text-align:      right;
    color:           #dddddd;
    margin:          0.5em 0 0 0;
    padding:         0 0 0 0;
    line-height:     0.75em;
    border-bottom:   0.05em solid #dddddd;
}

#menu table tbody tr.first th h3
{
    margin:          0 0 1em 0;
}

#menu table tbody th.serviceGroup
{
    padding-top:     1em;
    font-size:       1.3em;
    font-variant:    small-caps;
    letter-spacing:  0.25em;
    color:           #a73154;
}

#menu table tbody td
{
    font-size:       1.1em;
    padding:         0;
    margin:          0;
}

#menu table tbody td.serviceName
{
    width:           3.5in;
    padding-right:   25px;
    text-align:      right;
    font-weight:     bold;
    font-style:      italic;

}

#menu table tbody td.servicePrice
{
    font-size:       1.4em;
    line-height:     1.0em;
    padding-left:    0;
    font-weight:     bold;
}

#menu table tbody td.serviceDur
{
    font-size:       0.9em;
    padding-left:    0;
    font-style:      italic;
    color:           #999999;
}

.currChar
{
    padding-right:   3px;
    color:           #dddddd;
    display:         none;
}

.currFull
{
    font-size:       0.6em;
}

#content #giftcertificates
{
    font-size:        1.1em;
    margin-top:       0;
    text-align:       center;
    font-weight:      bold;
    font-style:       italic;
    color:            #999999;
}

#process
{
    margin:          0 25px;
}

#process ol
{
    margin:          20px 0 0 0;
    padding:         0 0 0 50px;
    font-weight:     bold;
    font-style:      italic;
    color:           #a73154;
}

#process ol li span
{
    font-weight:     bold;
    font-style:      normal;
    color:           #a73154;
}

#opiLink
{
    float:           left;
    margin:          12px 20px 0 25px;
}

#opiLink a,
#opiLink a:hover,
#opiLink a img
{
    border:          0;
}

/*----( Contact )-----------------------------------------*/

#contactform
{
    margin-bottom:    3em;
}

#contactform label
{
    display:          none;
}

#contactform form
{
    margin:           0;
    padding:          0;
}

#contactform fieldset
{
    border:           0;
    margin:           0;
    padding:          0;
}

#contactform legend
{
    display:          none;
}

#contactform p
{
    margin:           0;
    padding:          0;
    text-align:       center;
}

#contactform input.text,
#contactform textarea
{
    border:           1px solid #cccccc;
    padding:          5px 8px;
    width:            6in;
    font-family:      "Trebuchet MS", Tahoma, Arial, sans-serif;
    font-size:        1.1em;
    font-weight:      bold;
    color:            #a73154;
    background:       #ffffff url("/images/contact/bg_name.gif") bottom right no-repeat;
}


#contactform #name   { background-image: url("/images/contact/bg_name.gif"); }
#contactform #phone  { background-image: url("/images/contact/bg_phone.gif"); }
#contactform #email  { background-image: url("/images/contact/bg_email.gif"); }

#contactform #message
{
    width:            6in;
    background:       #ffffff url("/images/contact/bg_message.gif") top left no-repeat;
    padding-top:      15px;
    line-height:      1.6em;
}

#contactform #send
{
    font-family:      "Palatino Linotype", Palatino, Georgia, serif;
    border:           1px solid #cccccc;
    border-top:       1px solid #ffffff;
    border-left:      1px solid #ffffff;
    background:       #e5e5e5;
    font-size:        1.4em;
    font-style:       italic;
    font-weight:      bold;
    padding:          3px 10px;
    color:            #a73154;
}


#content #mailingaddress p
{
    text-align:       center;
    font-size:        1.2em;
    line-height:      1.4em;
}

/*----( Map & Hours )-------------------------------------*/

#divMap
{
    margin:          10px auto;
    text-align:      center;
}

#divMap a
{
    border:           1px solid #cccccc;
    display:          block;
    width:            403px;
    height:           403px;
    background:       #e9e9e9;
}

#divMap img
{
    margin:           3px;
    padding:          0;
    border:           0;
}

#content #map_desc
{
    font-size:        0.9em;
    margin-top:       0;
    text-align:       center;
}

#hours
{
    margin:          10px 0;
}

#hours table
{
    border:          0;
    border-collapse: collapse;
    width:           100%;
}

#hours table th,
#hours table td
{
    border:          0;
}

#hours table caption,
#hours table thead th
{
    display:         none;
}

#hours table tbody td
{
    font-size:       0.9em;
}

#hours table tbody td.day
{
    width:           47%;
    padding-right:   3%;
    text-align:      right;
    font-weight:     bold;
}

#hours table tbody td.open
{
    color:           #009900;
}

#hours table tbody td.closed
{
    color:           #cc0000;
    font-style:      italic;
}

#hours table tfoot td
{
    font-size:       1.2em;
    font-style:      italic;
    text-align:      center;
}

#payment p
{
    text-align:      center;
}

#payment ul
{
    margin:          0 auto;
    padding:         0 0 35px;
    text-align:      center;
    background:      transparent url("/images/credit_cards.gif") 50% 100% no-repeat;
}

#payment ul li
{
    font-size:       1.2em;
    margin:          0;
    padding:         0;
    list-style:      none;
    font-weight:     bold;
}