/* style.css */

/* Sections:
 =GLOBAL
 =FOOTER
 =COLOURBARS
 =MAIN          ie, index.php
 =PAGEBANNER
 =CONTENT       general content
 =LEFTMENU
 =ABOUT
 =INFORMATION
 =PETS
 =SERVICES
 =WHO
 =OTHER
*/

/* =GLOBAL */

html {
    height: 100%;
}

body {
    height: 100%;
    font-family: "Georgia", serif;
    background-color: white;
    margin: 0px;
    padding: 0px;

    /* For the top banner and to prevent wrapping of floats */
    min-width: 900px;
}

body, a, div, span {
    font-size: 14pt;
}

h3 {
    margin: 0px 0px 1ex 0px;
    padding: 0px;
}

h4 {
    color: #0099CC;
}

h5 {
    color: #0099CC;
    font-size: 12pt;
}

a:link {
    color: #136AC3;
    text-decoration: none;
}

a:hover,
a:visited:hover {
    text-decoration: underline;
}

a:visited {
    color: #7613C3;
    text-decoration: none;
}

a:active {
    color: #FB4C75;
}

p {
    margin-top: 0px;
    padding-top: 0px;
    margin-bottom: 1ex;
    clear: none !important;
}

.nonVisual {
    display: none;
}

.stretcher {
    clear: both;
}

br.stretcher {
    font-size: 1px;
    height: 1px;
}

div.gap {
    display: block;
    height: 1ex;
}

/* =FOOTER
 * hack from http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
 */

.bodyWrapper {
    min-height: 100%;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: -14ex;    /* Same as footer and footerPush height */
}
#IE6 .bodyWrapper {
    /* IE6 min-height hack */
    height: auto !important;
    height: 100%;
}

.footerPush,
.footer {
    /* remember: margins contribute to total height - so 12+2=14 shown above */
    height: 12ex;
    margin-top: 2ex;
    clear: both;
    margin-left: 1ex;
    margin-right: 1ex;
}

.footer {
    height: 11.8ex; /* FF gives a vertical scrollbar if I don't do this ): */
    position: relative; /* to allow absolute positioning relative to the footer */
}

.footer hr {
    margin-top: 2px;
    margin-bottom: 2px;
    border-top: 1px solid black;
    border-bottom: 1px solid #AAA;
    padding: 0px;
}

/* These two are positioned absolutely so we can center facebookBlock
   between them */
#footerAddress {
    position: absolute;
    right: 0px;
    top: 0.5ex;
    font-size: 10pt;
    text-align: right;
    font-style: italic;
}

#W3C {
    position: absolute;
}

#W3C img {
    border-width: 0px;
}


#facebookBlock {
    display: block;
    width: 25em;
    margin-left: auto;
    margin-right: auto;
    font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
    font-size: 8pt;
    text-align: center;
}

#facebookBlock a {
    text-decoration: none;
    color: #3B5998;
    font-family: inherit;
    font-size: inherit;
}

#facebookBlock img {
    border: 0px;
}

/* =COLOURBARS */

.blue-cat {
    background: #0099CC url("/images/bk-blue-cat-trans.png")
        no-repeat scroll bottom left;
    width: 218px;
    /* min-height: 374px;    * Total desired height of colour bar */
    min-height: 213px;      /* Height of usable blank space */
    padding-bottom: 161px;  /* Height of image used in background */
}

.yellow-dog {
    background: #FFDB00 url("/images/bk-yellow-dog-trans.png")
        no-repeat scroll bottom left;
    width: 218px;
    /* min-height: 290px;    * Total desired height of colour bar */
    min-height: 116px;      /* Height of usable blank space */
    padding-bottom: 174px;  /* Height of image used in background */
}

.green-cat {
    background: #48D50D url("/images/bk-green-cat-trans.png")
        no-repeat scroll bottom left;
    width: 177px;
    /* min-height: 423px;    * Total desired height of colour bar */
    min-height: 100px;      /* Height of usable blank space */
    padding-bottom: 323px;  /* Height of image used in background */
}

.magenta-dog {
    background: #FB4C75 url("/images/bk-magenta-dog-trans.png")
        no-repeat scroll bottom left;
    width: 178px;
    /* min-height: 303px;    * Total desired height of colour bar */
    min-height: 149px;      /* Height of usable blank space */
    padding-bottom: 154px;  /* Height of image used in background */
}

/* =MAIN */

body.mainPage {
    min-width: 791px;
}

#mainOuter {
    width: 791px; /* 218+218+177+178 */
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

#mainHeader {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 791px; /* as above -- or 100%, but that makes it vanish in IE6 */
    margin-top: 1ex;
    color: white;
    text-align: center;
    font-weight: bold;
    font-size: xx-large;
}

#mainColumn1 {
    width: 218px;
    float: left;
}
#mainColumn1 img {
    padding-top: 213px;
}

#mainColumn2 {
    width: 218px;
    float: left;
}
#mainColumn2 img {
    padding-top: 116px;
}

#mainColumn3 {
    width: 177px;
    float: left;
}
#mainColumn3 img {
    padding-top: 100px;
}

#mainColumn4 {
    width: 178px;
    float: left;
}
#mainColumn4 img {
    padding-top: 149px;
}

div.maincolumn {
    margin: 0px;
}

div.maincolumn h2 {
    font-family: serif;
    font-size: 16pt;
    font-weight: bold;
    margin: 0px 10pt 10pt 10pt;
    padding: 0px;
}

ul.mainmenu {
    list-style-type: none;
    padding: 0px 10pt;
    margin: 0px;
    font-size: 10pt;
}

/* =PAGEBANNER */
#pageBannerOuter {
    position: relative;
    background: white url("/images/banner_l.png") no-repeat scroll top left;
    min-width: 900px;
    min-height: 136px;
    text-align: center;
}

#pageBannerInner {
    position: relative;
    background: transparent url("/images/banner_r.png") no-repeat scroll top right;
    min-height: 136px;
}

#pageBannerHeader {
    color: #136AC3;
    text-align: center;
    margin-top: 0px;
    padding-top: 0px;
    margin-left: auto;
    margin-right: auto;
    border-width: 0px;
}

#pageBannerToC {
    list-style-type: none;
    text-align: center;
    margin: 0px;
    padding: 0px;
    font-size: 10pt;
}

#pageBannerToC li {
    display: inline;
    padding-left: 1ex;
    padding-right: 1ex;
    margin: 0px;
}

/* =CONTENT */

#contentOuterWrapper {
    margin-top: 12pt;
}

.content {
    float: left;
    margin-left: 1ex;
    width: 70%;
}

.content p {
    width: 65%;
}

.photoRight {
    float: right;
    clear: both;
    text-align: center;
    /* IE needs the width specified for these or it acts up */
    width: 210px;
    max-width: 210px;   /* Yay */
    margin-bottom: 1ex;
}

.photoCaption {
    color: #48D50D;
}

.photoCaption cite {
    display: block;
    font-size: smaller;
    font-style: normal;
    text-align: left;
}

#IE6 .photoCaption cite {
    font-size: small;
}

.photoTour {
    display: block;
    width: 400px;
    margin: 1ex auto 3ex auto;
    text-align: center;
}

.photoTourRight {
    display: block;
    width: 400px;
    margin: 1ex 0px 3ex auto;
    text-align: center;
}

/* see also #locationMap below */
.photoLarge {
    display: block;
    float: right;
    width: 400px;
    margin-left: 1ex;
    text-align: right;
}

.sectionToC {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

.sectionToC li {
    margin: 0px;
    padding: 0px;
}

/* =LEFTMENU */

.leftMenu {
    float: left;
    color: white;
    margin-left: 1ex;
    margin-right: 1ex;
}

.leftMenu a:link {
    color: white;
}

.leftMenu a:visited {
    color: #CCCCCC;
}

.leftMenu h2 {
    padding-left: 1ex;
}

.leftMenuToC {
    margin: 2ex 2ex 2ex 4ex;
    padding: 0px;
    list-style-type: none;
    text-indent: -2ex;
}

.leftMenuToC li {
    padding: 0px;
    margin: 1ex 0px;
}

/* =ABOUT */

h4.contactHeader {
    margin: 0px;
    display: inline;
}
#hoursTable {
    color: #0099CC;
    margin-bottom: 2ex;
}

#hoursTable td {
    padding: 0px 0.5ex;
}

#locationMap {
    display: block;
    float: right;
    width: 404px;
    margin-left: 1ex;
    text-align: right;
}

#locationMap img {
    border-width: 2px;
}

/* =INFORMATION */

/* =PETS */

#heartwormMap {
    width: auto;
    max-width: none;
}

#vaccinationToC li {
    display: block;
    float: left;
    width: 40%;
}

#articleList li {
    margin-bottom: 1ex;
}

/* =SERVICES */

#medicineToC {
    clear: right;
}

/* Funky multi-column layouts for great justice */
#medicineToC li {
    margin-right: 0px;
    margin-bottom: 0px;
    padding: 0px;
    width: 11em;
    line-height: 1.2em;
    text-indent: -1em;
}

/* Negative text-indent breaks in IE6.  Workaround isn't pretty,
   but better than nothing */
#IE6 #medicineToC li {
    text-indent: 0px;
}

li.med-col-1 { margin-left: 1em; margin-top: 0px; }
li.med-col-2 { margin-left: 12em; margin-top: 0px; }
li.med-col-3 { margin-left: 24em; margin-top: 0px; }
li.med-col-top { margin-top: -7.2em !important; }

#testingToC li {
    margin-right: 0px;
    margin-bottom: 0px;
    padding: 0px;
    line-height: 1.2em;
}
li.test-col-1 {
    width: 14em;
    margin-left: 0em;
}
li.test-col-2 {
    width: 10em;
    margin-left: 14em;
}
li.test-col-top {
    margin-top: -4.8em;
}

#surgeryToC li {
    display: block;
    float: left;
    width: 40%;
}

#dentistryConsiderations li,
#dentistryFluoride li {
    margin-bottom: 1ex;
}

#boardingToC li {
    display: block;
    float: left;
    width: 40%;
}

/* =WHO */

#veterinaryOath {
    font-weight: bold;
}

/* =OTHER */

#body404 {
    margin: 24pt auto 0px auto;
    text-align: center;
    width: 100%;
}