@charset "UTF-8";

/* default setup */
html, body{
	background-image:url(../images/c21_bg.gif);
	background-repeat: repeat-x;
    background-color:#a9a9a9;
    padding:0px;
    margin:0px;
    border: 0px;
    height:100%;
    font-family:arial, verdana, helvetica, sans-serif;
    font-size:12px;
    text-align: center;
}

p, a, * a, th, td, li, div, span {
    font-family: arial, verdana, helvetica, sans-serif;
    font-size: 12px;
    color: black
}

a, * a {
    color:#006699;
    text-decoration: none;
}

a:hover, * a:hover {
    color:#003366;
    text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
    margin: 6px 0;
}

h1 {
    font-size: 18px;
}

h2 {
    font-size: 16px;
}

h3, th {
    font-size: 14px;
}

h4 {
    font-size: 12px;
}

h5 {
    font-size: 10px;
}

h6 {
    font-size: 8px;
}

a * img {
    border: none;
}

.errorText {
    color: red;
    font-weight: bold;
}

.hidden {
    display: none;
}

.rowHeading {
    background-color: #ffcc00;
    color: black;
}

.rowOdd, .rowOdd a{
    color: black;
    background-color: #FFF2BF;
}

.rowEven, .rowEven a{
    color: black;
    background-color: #FFE680;
}

.button, a.button {
    font-size: 10px;
    background-color: #ffcc00;
    color: black;
    display: block;
    border: 1px solid black;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    margin: 2px;
    padding: 2px;
    width: 100px;
    size: 100px;
}

.button:hover a.button:hover {
    text-decoration: underline;
}

/* above items should appear on every template css file
    as they are used in the sub-templates from the common folder
*/


/* centered, fixed main content area */
div#main {
    width: 750px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

/* home page */
    /* main layout */
    #homePageTop, #homePageMiddle, #homePageBottom {
        width: 750px;
        padding: 0;
        margin: 0;
        border-top: none;
        border-bottom: none;
        border-left: 1px solid black;
        border-right: 1px solid black;
        background-repeat: no-repeat;
        background-position: top left;
        position: relative;
        clear: both;
    }

    #homePageTop {
        height: 313px;
        background-image: url('../images/home-top.jpg');
    }

    #homePageMiddle {
        height: 296px;
        background-image: url('../images/home-middle.jpg');
    }

    #homePageBottom {
        height: 141px;
        background-image: url('../images/home-bottom.jpg');
        border-bottom: 1px solid black;
    }

    /* top area layout */
    #homeGallery {
        width: 250px;
        height: 170px;
        position: relative;
        top: 10px;
        left: 10px;
    }

    .homeGalleryText {
        width: 245px;
        position: absolute;
        bottom: 2px;
        z-index: 10;
        text-align: center;
        font-weight: bold;
        color: #fff;
		background: #000;
		padding: 5px;
		filter:alpha(opacity=70);
		-moz-opacity:0.7;
		-khtml-opacity: 0.7;
		opacity: 0.7;
    }

    #homeTopText table {
        width: 250px;
    }

    #homeTopText * td {
        color: white;
        font-weight: bold;
        font-size: 12px;
    }

    #homeTopText * a, #homeTopText * a:visited, #homeTopText * a:hover {
        color: #FFCC00;
        text-decoration: none;
    }

    #homeTopText * a:hover {
        text-decoration: underline;
    }

    #homeTopText {
        position: absolute;
        top: 175px;
        left: 295px;
    }

    #homeNavigation {
        position: absolute;
        top: 15px;
        right: 35px;
		
    }

    #homeNavigation ul {
        list-style-type: none;
        text-align: right;
    }

    #homeNavigation a, #homeNavigation a:hover, #homeNavigation a:visited {
        color: white;
        line-height: 25px;
        letter-spacing: 1px;
        font-weight: bold;
        text-decoration: none;
    }

    #homeNavigation a:hover {
        text-decoration: underline;
    }
	

    /* middle area layout */
    #homeMap {
        position: absolute;
        top : 10px;
        left: 490px;
    }

    #homeMap h2 {
        color: white;
        font-size: 12px;
    }

    #homeMap img {
        width: 250px;
        border: none;
    }

    #homeMapText {
        width: 160px;
        text-align: right;
        position: absolute;
        bottom: 10px;
        right: 276px;
        color: white;
        font-size: 10px;
    }

    #homeMiddleText {
        position: absolute;
        width: 315px;
        top: -25px;
        left: 10px;
    }

    #homeMiddleBubble {
        position: absolute;
        top: 215px;
        left: 10px;
        width: 140px;
    }

    #homeMiddleBubble a {
        color: black;
        text-decoration: none;
    }

    /* bottom area layout */
    #homeAwards {
        position: absolute;
        top: 15px;
        left: 320px;
    }

    #homeLogos {
        position: absolute;
        bottom: 5px;
        left: 210px;
    }

    #homeFooter {
        position: absolute;
        bottom: 5px;
        left: 290px;
        font-size: 10px;
        color: white;
        width: 450px;
    }

   #onlineOffice {
        text-align: right;
        float: right;
        padding: none;
        margin: none;
    }

    #onlineOffice , #onlineOffce:visited, #onlineOffice:active {
        color: white;
        font-size: 10px;
        }

/* inner page */

    /* main layout */
    #innerPageTop, #innerPageNavigation, #contexnt  {
        width: 750px;
        padding: 0;
        margin: 0;
        border-top: none;
        border-bottom: none;
        border-left: 1px solid black;
        border-right: 1px solid black;
        background-repeat: no-repeat;
        background-position: top left;
        position: relative;
    }

    #content  {
        width: 750px;
        padding: 0;
        margin: 0;
        border-top: none;
        border-bottom: none;
        border-left: 1px solid black;
        border-right: 1px solid black;
        background-position: top left;
        position: relative;
    }

    #innerPageTop {
        height: 146px;
        background-image: url('../images/inner-top.jpg');
        cursor: hand;
    }

    /* nav area. for drop down css, see external file menu.css */
    #innerPageNavigation {
        background-color: #ffcc00;
        height: 25px;
        border-bottom: 1px solid black;
        vertical-align: middle;
        z-index:100;
    }

    #content {
        background-color: white;
        text-align: left;
        vertical-align: top;
    }

    #contentSpan {
        padding: 5px 5px;
        /* ie6 hack to make min-height work */
        /* this forces the page to just fit at x768 height,
           if the content doesn't already push it; of course
           this also depends on how big their viewport is (think toolbars)
        */
        min-height:305px;
        height:auto !important;
        height:305px;
    }

    /* this div forces the content area to always
       match the height of the mls search area
    */
    #contentBottom {
        clear: both;
        height: 1px;
        background-color: black;
        font-size: 1px;
        padding: 0;
        margin: 0;
        border: 0;
    }

/* inner page */
/* search area */

    #contentSearch {
        float: left;
        height: 100%;
        width: 175px;
        padding: 0px 10px 10px 15px;
        margin: 0px 20px 0px 0px;
        color: white;
        font-size: 10px;
    }

    #contentSearch form {
        padding: none;
        border: none;
        margin: none;
    }

    #contentSearch h1 {
        font-size: 16px;
        text-align: center;
        margin: 10px 0px 0px 0px;
        padding: none;
    }

    #contentSearch h2 {
        font-size: 10px;
        text-weight: bold;
        margin: 4px 0px 2px 0px;
    }

    #contentSearch h2 a {
        font-size: 10px;
    }

    #contentSearch h3, #contentSearch h3 a {
        font-size: 10px;
        display: inline;
    }

    #contentSearch a {
        color: #ffcc00
    }

    #contentSearch .button {
        margin-left: 30px;
    }

    #loginBox {
        text-align: center;
        color: white;
    }

    .searchBackground {
        background-image: url('../images/side-background.gif');
        background-repeat: repeat-y;
    }


/* Pop it menu */
#popitmenu{
position: absolute;
background-color: #000;
font: normal 12px Verdana;
line-height: 18px;
z-index: 100;
visibility: hidden;
filter:alpha(opacity=90);
		-moz-opacity:0.9;
		-khtml-opacity: 0.9;
		opacity: 0.9;
}

#popitmenu a{
text-decoration: none;
padding-left: 6px;
color: #fff;
display: block;
}

#popitmenu a:hover { /*hover background color*/
background-color: #a9a9a9;
color: #fff;
}