﻿/**********************         *************************
== Contents                     == Glossary

1 - Main Layout Structure       Colour:red -    #bf2303
2 - Navigation                  Colour:green -  #4C741A
3 - Text Links & Images         Colour:grey -   #91896A
4 - Form Styling                Colour:gold -   #8E8254
5 - Global Styles               Colour:orange - #FF9933
6 - Round Cornered Boxes        Colour:brown -  #996633


== Global Reset 
*****************************************************/

html, body, div, span, h1, h2, h3, h4, h5, h6, p, hr, 
blockquote, a, a img, font, img, dd, dl, dt, li, ol, ul,
fieldset, form, label, legend, table, caption, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	line-height: inherit;
	font-family: inherit;
	text-align: left;
	vertical-align: baseline;
}
a img {
	border: 0;
}

ol, ul {
	list-style: none;
}

/*****************************************************
1 == Main Layout Structure
*****************************************************/

body 
{
    background-color: #d1d0b9;
    text-align: center;
    padding: 20px 0 0 0;
    font-family: Arial, helvetica, Sans-Serif;
    font-size: 100%;
}

#wrapper
{
    margin: 0 auto;
    width: 790px;
    background: #F5F3EE url(/_img/static/wrap-side-gradient.gif) repeat-y;
    position: relative;
}

#container
{
    margin: 0 auto;
    width: 780px;
    background: url(/_img/static/cont-top-curve.gif) top no-repeat;
    padding: 15px 5px 0 5px;
}

#hdrStrip
{
    width: 780px;
    height: 92px;
    background: url(/_img/static/hdr-bg-gradient.gif);
}

/********** Main Content ***********/

#contentHolder
{
    width: 780px;
    background: #F5F3EE url(/_img/static/content-bg.gif) top repeat-x;
}

/********** Left col >> ************/

#leftCol
{
    float: left;
    width: 199px;
    font-size: 75%;
    color: #666666;
}

.signUp
{
    background-color: #fff;
    width: 100%;
    border-top: dashed 1px #E6E4DD;
    margin: 0 0 10px 0;
}

/********** << Left col ends ***********/

/*********** Right Col >> **************/

#rightCol
{
    float: left;
    width: 540px;
    color: #666;
    font-size: 80%;
    padding: 15px 20px 15px 20px;
    border-left: dashed 1px #dedbd0;
}

.spacer
{
    width: 100px;
    height: 50px;
    float: right;
}

.narrowCol
{
    float: left;
    width: 330px;
    padding-right: 15px;
    background: url(/_img/static/narrowcol-bg.gif) top right repeat-y;
}

.suppCol
{
    float: right;
    width: 180px;
    font-size: 90%;
}

/********** << Right col ends **********/

/********** >> Footer ******************/

#footer
{
    width: 790px;
    margin: 0 auto;
    height: 20px;
    background: url(/_img/static/footer-bg.gif) bottom no-repeat;
    padding: 0 0 15px 0;
}
   
/********** << Footer & Main content ends ********/
    

/***************************************************************
2 == Navigation
***************************************************************/

#priNav
{
    margin: 0 0 0 180px;
 
}

#priNav li
{
    display: inline;
    margin: 0 37px 0 0; 
}

#secondNav
{
    background-color:#fff;
    width: 100%;
    padding: 10px 0 10px 0;
    margin: 0;
}

#secondNav li
{
    margin: 0 5px 5px 25px;
    padding: 5px 0 5px 0;
    border-bottom: dashed 1px #FF9900;
    list-style-image: url(/_img/static/bullet.gif);
}

#footNav
{
    font-size: 70%;
    float: right;
    display: inline;
    border-top: solid 1px #FF9933;
    border-left: dashed 1px #dedbd0;
    margin: 0 5px 0 0;
    width: 530px;
    padding: 5px 0 0 50px;
    color: #666; 
}

#footNav li
{
    display: inline;
    margin: 0 2px 0 2px;
}


/***************************************************************
3 == Text Links & Images
****************************************************************/

/******** Text *********/

h1, h2, h3, h4, h5, h6
{
    margin-bottom: 15px;
    font-family: Century Gothic;
    font-weight: normal;
    font-size: 150%;
}

h2{font-size: 130%;}
h3{font-size: 110%;}
h4{font-size: 100%;}

p
{
    margin: 3px 0 10px 0;
    line-height: 140%;
}

.tagline
{
    color: #8d8568;
    line-height: 160%;
    font-family: Century Gothic;
}

hr
{
    border-top: dashed 1px #FF9933;
    height: 1px;
    margin: 5px 0 5px 0;
}

ul
{
    margin: 0 0 10px 0;
}

li
{
    list-style-image: url(/_img/static/bullet.gif);
    margin-left: 15px;
    padding: 3px 0 3px 0;
}

ul.noBullet li
{
    list-style-image: none;
}

#formErrors
{
    color: red;
    font-size: 90%;
    font-style: italic;
    margin: 0px 0px 7px 0px;
}

div.imgHolder
{
    float: left;
    width: 110px;
    /*height: 140px;*/
    border: 1px #c0c0c0 solid;
    padding: 2px;
    margin: 4px;
}

/******** Links ********/

#contentHolder a
{
    color: #666;
    text-decoration: underline;
}

#contentHolder a:hover
{
    text-decoration: none;
}

#priNav a
{
    font-weight: bold;
    font-size: 80%;
    text-decoration: none;
    color: #999999;
}

#priNav a:hover, #priNav a.on, #secondNav a:hover, #secondNav a.on
{
    color: #663333;
}

#secondNav a
{
    color: #999;
    text-decoration: none;
    font-weight: bold;
}

#footNav a
{
    color: #666;
}

#footNav a:hover
{
    text-decoration: none;
}


a.thumb, a.galleryThumb
{
    border: solid 1px #ccc;
    margin: 0 15px 0 0;
}

a.thumb:hover, a.galleryThumb:hover
{
    border: solid 1px #FF9933;
}

a.galleryThumb
{
    margin: 0 6px 6px 0;
}

.pagelinks
{
    background: #F5EFE9;
    border: 1px #F2E8DE solid;
    margin: 0 0 15px 0;
    padding: 3px 5px;
    font-size: 95%;
    font-weight: bold;
}

.pagelinks a
{
    border: 1px #ccc solid;
    padding: 0 2px;
    margin: 0 1px;
    text-decoration: none;
}
.pagelinks a.on{background: #E6D6C6;}

/******** Images *********/

.logo
{
    margin: 12px 0 0 20px;
} 

.slogan
{
    margin: 0 0 13px 230px;
}

.top-img
{
    position: absolute;
    top: 0px;
    right: 5px;
}


/******************************************************
4 == Forms
******************************************************/

select.treatments
{
    width: 170px;
    border: solid 1px #a5acb2;
    font-size: 80%;
}

.inputLeftCol, .inputInternal, .inputTextarea
{
    width: 140px;
    border: solid 1px #a5acb2;
    margin-bottom: 5px;
}

.inputInternal
{
    width: 200px;
}

.inputTextarea
{
    width: 300px;
    height: 150px;
}

.submit
{
    background-color: transparent;
    border: none;
    cursor: pointer;
    margin-left: 10px;
    color: #666;
    font-weight: bold;
}

/******************************************************
5 == Independant Global Styles
******************************************************/

.floatLeft{float: left;}
.floatRight{float: right;}
.clearer{clear: both;}
.indent{margin-left: 15px; margin-right: 5px;}
.noMargin{margin-bottom: 0px;}
.uL{border-bottom: dashed 1px #FF9933;}
.inlineImg{margin: 0 15px 1px 0;}
.smallerText{font-size: 90%;}
#rightCol .smallerText{margin: 0;}
.highlight{background-color: #ccc/*#FF9933*/; float: left; width: 100%; border: solid 1px #ccc/*#FF9933*/;}
.italic{font-style: italic;}
.quote{font-size: 160%; font-family: Times New Roman;}

/**** Colour Schemes ****/

.red{color: #bf2303;}
.green{color: #4C741A;}
.grey{color: #91896A;}
.gold{color: #8E8254;}
.orange{color: #FF9933;}
.brown{color: #996633;}
 
/*******************************************************
6 == Round Cornered Boxes
*******************************************************/ 
    
.rC{background-color: #fff; float: left; margin-right: 10px;}
.rCContent{padding: 0 5px 0 8px; min-height: 150px; height: auto !important; height: 150px;}

.narrow{width: 180px;}
.med{width: 255px;}
.wide{width: 330px;}
     
.rtop, .rbottom{display:block; background-color: #F5F3EE;}
.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden; background-color: #fff;}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px} 

#map{border: 1px #a0a0a0 solid; width: 518px; height: 300px;}
