/* layout styles */

body {
font-family: verdana, arial, sans-serif;
font-size:10px;
background-image: url(/images/gradient_bg3.jpg);
background-repeat:repeat-x;
background-color: #e0e2dc;
text-align: center;
min-width: 770px;
}


/*LAYOUT DIVS*/

#centeredContainer, #bottomBoxWrapper, #footerNavBox{ /* this is a containing box that centers the content in the viewport */
width:770px;
margin-right:auto;
margin-left:auto;
margin-top:10px;
padding:0px;
text-align:center; 
background-color: transparent;
}


/* header box for logo and home button*/

#logoHeaderBox {
height: 97px;
background-color: #fff;
background-image: url(/images/logo-box-bg.jpg);
width: 770px;
margin: 0px;
padding: 0px;
}

#headerBoxLeftCorner {
height: 97px;
float: left;
background-color: transparent;
}


#headerBoxRightCorner {
height: 97px;
float: right;
background-color: transparent;
}

#site_search {
float: left;
padding: 35px 0px 0px 0px;
margin: 0px;
width: 450px;
text-align: right;
}

input.searchButton {
font-family : Verdana, Arial, sans-serif; 
font-size : 12px; 
color : #444444; 
background-color : #fff; 
margin: 0px 0px 1px 3px;
padding-left: 2px;
padding-right: 2px;
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
border-right: 2px solid #333;
border-bottom: 2px solid #333;
}

.search_box {
background: url(/images/widgets/search_bg.jpg) no-repeat;
border: 1px solid #ccc;
padding-left: 6px;
height: 21px;
}

#headerBoxLogo{
height: 97px;
float: left;
background-color: transparent;
}

/* end header box */


/* top nav **** SEE global.css for nav link styl a.topNav */
#topNavBox {
height: 50px;
width: 770px;
text-align: center;
background-image:url(/images/top_nav/nav_bg.jpg);
margin-bottom: 6px;
background-color: #5078b7;
}

/* end top nav box */
#navList {
margin: 16px 0px 0px 0px;
padding: 0px;
}

#navList li {
display: inline;
list-style-type: none;
padding: 0px;
}

#topNavLeftCorner {
width: 17px;
float: left;
}



#topNavRightCorner {
width:18px;
float: right;
background-color: #5179b7;
}



/* left column */

#contentWrapper {
width: 770px;
background-color: transparent;
}

#leftColWrapper {
width: 253px;
background-image: url(/images/left_col_bg.jpg);
background-color: #fff;
float: left;
}

#leftColContent {
background-color: transparent;
text-align:left;
}

#leftColBottom {
width: 253px;
background-color:transparent;
}


#leftNavWrapper {
width: 200px;
background-color:#d5dee7;
text-align: left;
margin-left:25px;
background-image: url(/images/left_nav/left_nav_sub_bg.jpg);
}


/* right column (content column) */

#contentCol {
width: 517px;
float: right;
background-color: transparent;
}

br.clearTheFloat {
clear: both;
}

#flashBox {
background-color:transparent;
width: 517px;
background-color: #d1d9cd;
}



#contentBox {
background-image: url(/images/content_box/content_box_bg.jpg);
width: 517px;
text-align: left;
background-color: #fff;
}


#contentBoxBottom {
background-color: #fff;
}


#bottomBoxWrapper {
height: 99px;
background-color: #fff;
background-image: url(/images/content_box/box-bottom-bg.jpg);
width: 770px;
margin: 0px;
padding: 0px;
float:right;
}

#bottomBoxLeft {
float: left;
background-color: transparent;
}

#bottomBoxRight {
float: right;
background-color: transparent;
}


#footerNavBox {
height: 100px;
width: 770px;
background-color: transparent;
text-align: center;
float: right;
}



/*widgets*/

div.teaserBoxTop {
width: 463px;
background-color: #fff;
}

div.teaserBoxBottom {
width: 463px;
}

div.teaserBoxWrapper {
width:463px;
background-image:url(/images/teaser_box/teaser_box_bg.jpg);
padding-top: 5px;
margin-bottom: 20px;
float: left;
}

div.teaserBoxThumbnail {
float: left; 
padding-left: 15px;
margin-right: 14px;
}

div.teaserBoxContent {
float: left; 
width: 320px;
padding-bottom: 10px;
}


#advantageBanner {
background-color: transparent; 
width: 209; 
height: 248; 
margin-left: 5px; 
background-image: url(/images/widgets/advantage_banner.gif);
}

#videoTourButton {
margin: 16px 0px 20px 30px;
background-color: transparent;
}

#videoTourMenu {
background-image: url(/images/widgets/video_tour_menu.gif);
background-repeat: no-repeat;
background-color: transparent;
width: 132px;
height: 171px;
padding: 0px;
margin: 0px 0px 10px 0px;
display: none;
}


/* thumbnail floats */
/* don't set width of div, set width of block level <a> that wraps around the thumbnail
    to the same width as the thumbnail. Opera screws up otherwise.
	
	See gallery thumbnail floats below the floatLeft styles
*/
div.floatLeft {
float: left;
margin: 3px 20px 4px 7px;
background-color: #fff;
padding: 7px 5px 3px 5px;
border-top: 1px solid #999;
border-right: 2px solid #555;
border-bottom: 2px solid #555;
border-left: 1px solid #999;
}

/* set width inline of div that wraps image */

/*set height and width inline for <a> that wraps image*/
div.floatLeft a {
display: block; 
border: 1px solid black;
padding: 2px;
}
 
div.floatLeft a:hover { 
border: 1px solid red;
padding: 2px;
}

/*give a bottom margin to the paragraph directl preceding a div.floatLeft
See fug/donor-area.php for an example */
div.floatLeftLastP p.normal {
margin-bottom: 30px;
}

span.caption {
display: block;
padding-left: 4px;
padding-bottom: 3px;
margin-top: -8px;
}

span.caption a.normal:link, span.caption a.normal:visited, span.caption a.normal:hover {
border: none;
display:inline;
}

/* thumbnails for patient gallery */
div.patientThumbFloat
{
float: left;
width: 162px;
margin: 3px 20px 20px 7px;
background-color: #fff;
padding: 7px 5px 3px 5px;
border-top: 1px solid #999;
border-right: 2px solid #555;
border-bottom: 2px solid #555;
border-left: 1px solid #999;
text-align: center;
}

.clearBoth {
clear: both;
}

/*set height and width inline for <a> that wraps image*/
div.patientThumbFloat a {
display: block;
width: 150px;
border: 1px solid #999;
padding: 2px;
margin-left: auto;
margin-right: auto;
}
 
div.patientThumbFloat a:hover { 
width: 150px;
border: 1px solid red;
padding: 2px;
}


/* for tiny thumbs in gallery pop up*/
div.patientThumbMini
{
margin: 5px 0px 5px 0px;
}


div.patientThumbMini a {
display: block;
border: 1px solid #999;
padding: 2px;
margin-left: auto;
margin-right: auto;
}
 
div.patientThumbMini a:hover { 
border: 1px solid red;
padding: 2px;
}