/* :::::::: CSS Styles :::::::: Title: Idaho Vetrinary Hospital Author: Lynn Stott URL: www.stottdesign.com Version: 1 Descrip: Idaho Vetrinary Hospital Web Created: 1/15/2008 Modified: 2/6/2008 /* ---------------------------------------------------------------------- Base default font size, type, and line height ------------------------------------------------------------------------- */ body { background: #AFB0B1; text-align:center; } html body, input, select, textarea { font-size: 76%; font-family:Verdana, Arial, Helvetica, sans-serif; color: #464646; } html>body, input, select, textarea { font-size: 76%; font-family:Verdana, Arial, Helvetica, sans-serif; color: #464646; } select, input, textarea { font:99% Verdana, Arial, Helvetica, sans-serif; } table { border:0; } /* ---------------------------------------------------------------------- Pre-sets ------------------------------------------------------------------------- */ * { margin:0; padding:0; } ul { list-style:none; float:left; } li { float:left; list-style:none; } /* ---------------------------------------------------------------------- Global settings ------------------------------------------------------------------------- */ :focus { -moz-outline-style: none; } .hide { display: none; } img { border: 0; } p { padding-top: 9px; clear:both; } .clearfloat { clear: both; } .noborder { border: 0; } .block { display:block; } .bold { font-weight:bold; } .italic { font-style:italic; } .NormalFont { font-weight:normal; } p.clear { clear:both; font-size:.2em; height:0; padding:0; } .imp { color:red; font-weight:bold; } .float_left { float: left; margin:0 55px 0 0; } .sm_text { color:#999; font-style:italic; font-size:10px; display:inline; } /* ---------------------------------------------------------------------- LINKS ------------------------------------------------------------------------- */ a, a:link, a:visited, a:focus { text-decoration:none; color: #727A41; border-bottom: 1px solid #727A41; /* background: transparent url(bg_dot.gif) 0 16px repeat-x;*/ } a:hover { color: #fff; background:#727A41; } a:active { } a.img-link {border:0;} a.img-link:hover {background:none;} /* ---------------------------------------------------------------------- FORMS ------------------------------------------------------------------------- */ ul#forms { padding:25px 0 0 0; width:470px; } ul.inner_form { padding:7px 0 0 40px; width:427px; clear:both; } ul#forms li { font-weight:bold;float:none; clear:left; padding: 7px 0 7px 3px; line-height:2em; border-top: 1px dashed #ccc; height: 1%; } ul#forms li.plain { border:0; } ul#forms li.text {border:0; padding:2px 3px;} label { font-weight:bold; width:160px; float:left; clear:both; } .wide_lbl { width:300px; } .short_lbl { width:59px; } .280_lbl { width:280px;} .50_lbl { width:50px;} input, select { width:200px; } input { height:16px; } textarea { width:280px; height:150px; } .SmallItalic { font-style:italic; line-height:.90em; font-weight:normal; } .RadioBtns input { margin: 0 0 0 12px; width:auto; vertical-align:middle; } .RadioBtns label { display:inline !important; float:left;} input, select, textarea { font-size:1.1em; } .SubmitBtn { width:120px; height:25px; margin-top: 20px; padding:0; } .req {color:red;} /* ---------------------------------------------------------------------- PAGE STRUCTURE | LAYOUT ------------------------------------------------------------------------- */ #wrap { width:905px; margin:0 auto; padding-bottom:25px; background: url(bg.gif) 0 0 repeat-y; overflow:hidden; /* need for Mozilla to clear float */ } #header { width:905px; height:159px; position:relative; background: transparent url(bg_header.jpg) 15px 0 no-repeat; } #content { width:905px; text-align:left; overflow:hidden; /* need for Mozilla to clear float */ padding:0 0 30px 0; } #footer { width:905px; height:60px; margin:0 auto; background: transparent url(bg_footer.png) 0 0 no-repeat; border-top:0; clear: both; font-size:.85em; } #left_col {float:left; width: 152px; margin-left:16px; padding:17px 0 0 0; } #right_col {float:left; width: 651px; margin:55px 0 0 0; font-size:.90em; line-height:1.7em; } #right_col .nest {float:left; padding: 0 0 0 34px; } #right_col .nest p {padding-top:13px; } #right_col .nest strong, #link_pg h2 {color:#E07A12; } #right_col ul {clear:both;} /* ---------------------------------------------------------------------- HEADINGS ------------------------------------------------------------------------- */ h1 { display:inline; float:left; font-size:1.4em; line-height:2em; font-weight:bold; color:#1D4E81; border-bottom:1px solid #333;} h1.plain { border:0; } h2 { } h3#tag { text-indent:-999em; /* Hide tag line on internal pages... show only on home page */ } #header h1 { margin:49px 0 0 31px; background-image: url(logo_id_veterinary_hospital.png); background-position: 0 0; background-repeat:no-repeat; float:left; display:block; height:66px; width: 283px; border:0; } #logo { text-decoration:none; text-indent:-9999em; float:left; display:block; height:66px; width: 283px; background:none; border:0; z-index:100; } /* image floats */ ul#doctors { float: left; margin:25px 0 0 0; clear:both; } ul#doctors li { float:left; margin:0 44px 0 0; text-align: center; font-weight:bold; color:#1D4E81; line-height:1.8em; } img { border:0; } ul#doctors li a { border:0; } /* ---------------------------------------------------------------------- TOP NAVIGATION ------------------------------------------------------------------------- */ #header ul { float:right; margin-top:118px; margin-right: 15px;} #header li { padding:0 17px 1px 17px; } #header li a { font-weight:bold; color:#333; background:none; font-size: .80em; line-height:.80em; border:0; } #header li a:hover { color:#000; border-bottom: 1px solid #727A41; background:none; } /* ---------------------------------------------------------------------- FOOTER ------------------------------------------------------------------------- */ #footer { padding: 27px 0 0 0; text-align:center; } #footer p { padding:0; color:#6A7450; letter-spacing:.5em; } #footer ul { margin:10px auto; float:none; width:51em;} #footer li { margin:0 1em; } #footer li a { float:left; color:#6D6E71; background:none; font-weight:bold; border:0; } #footer li a:hover { color:#333; } /* ---------------------------------------------------------------------- ICONS ------------------------------------------------------------------------- */ a.pdf { background: url(pdf.gif) no-repeat right 1px; padding:3px 20px 0 0; } a.pdf:hover { color: #fff; background:#727A41 url(pdf.gif) no-repeat right 1px; } /* ---------------------------------------------------------------------- MAIN NAVIGATION ------------------------------------------------------------------------- */ ul#nav { width:880px; margin:0 0 0 3px; padding-left:15px; background:url(bg_nav.gif) 0 0 no-repeat; height:27px; } #nav a { border:0; } /* don't put #nav before these classes so you can change the child widths */ #nav li { display:block; } #nav li a { display: block; padding: 5px 0 4px 23px; color:#262324;} #nav li.has_children a { background: url(bg_arrowdown.png) right 45% no-repeat; } #home { width: 134px; } li#home a { padding-left:42px; } #services { width: 157px; } #about { width: 127px; } #news { width: 167px; } #resources { width: 140px; } #contact { width: 146px; } /* 2nd and 3rd level menus */ #nav ul { position: absolute; z-index: 99; left: -999em; margin: 0 0 0 -1px; width: 17.4em; w\idth: 13.5em; height: auto; border: solid #BBBE9C; border-width: 0 2px 2px 2px; background: #F9F9F9; padding:0; border-top: 1px solid #6B6B6B; } /* 3rd level menus only */ #nav ul ul { margin: -1.3em 0 0 12em; } /* 2nd and 3rd level menus */ #nav li li { padding:0; width: 13.5em; } #nav li li a { border-bottom: 1px solid #BBBE9C; } #nav ul a { border-right: 0; font-size:.90em; padding:4px 0 4px 20px; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; } /* This "unhides" the sub-menus (left: -999em is what hides them) */ #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; } #nav li:hover a, #nav li.sfhover, #nav li.active_parent, #nav li.active { background-color: #727A41; } #nav li.active_parent a, #news-pg #nav li#news { background-color: #727A41; } /* 2nd and 3rd level menus */ #nav ul ul { border-top: 2px solid #BBBE9C; } #nav ul li:hover a, #nav ul ul li:hover a, #nav ul li.sfhover, #nav ul li.has_children:hover, #nav ul ul li.sfhover a, #nav ul li.active { background-color: #D7DAB4; } /* 2nd and 3rd level menus */ #nav ul li a, #nav li.has_children li a { background: url(bg_bullet.gif) 9px 50% no-repeat; } #nav li.has_children li a:hover { background-color:#D7DAB4; } #nav ul ul li a { background: none; } /* 2nd level menus only */ #nav a.sub { background: url(arrow-right.gif) right 52% no-repeat; } /* ---------------------------------------------------------------------- LEFT NAVIGATION ------------------------------------------------------------------------- */ #menu { text-align:right; border-bottom:2px solid #fff; font-size:.85em; letter-spacing:-.05em; } #menu a { border:0; } ul#menu { width:150px; float:right; } ul#menu li { float:left; width:150px; line-height:34px; border-top:2px solid #fff; clear:both; } ul#menu li a { color:#4F5451; display: block; height:100%; padding-right: 8px; font-weight:bold; } ul#menu li a:hover, li.current-cat, ul#menu li.active a { background-color: #F0F4C5; } ul#menu li.current-cat li { background-color: #d7dab4; } /* ---------------------------------------------------------------------- NEWS PAGES ------------------------------------------------------------------------- */ p.summary { margin-bottom:10px; } .post { margin: 0 0 10px 0; } .post p.strong { font-weight:bold; color:#8B9C41; clear:left; } .post h2 { text-indent:0; font: normal 1.5em/.95em Georgia, "Times New Roman", Times, serif; color: #000; margin: 0 0 7px 0; padding: 0 0 2px 0; border-bottom: 1px dotted #bbb; } p.date { margin: 0 0 5px 0; font-family: Georgia, "Times New Roman", Times, serif; font-size:.90em; text-transform: uppercase; letter-spacing: 0.1em; color: #999; } .postmetadata { color:#777; padding-bottom:15px; font-family:Verdana, Arial, Helvetica, sans-serif; clear:left; } .postmetadata a { border:0; } .post ul { padding:5px 20px 13px 20px; float:none; } .post li { background: transparent url(bg_bullet.gif) 0 11px no-repeat; float:left; line-height:1.6em; padding: 5px 0 0 13px; width:550px } ul#table_style { padding:0; margin:15px 0 0 0; width:475px; float:left; } ul#table_style li { float:left; font-weight:bold; padding:0 0 0 5px; background:none; width:210px; } ul#table_style li.right { float:left; font-weight:normal; width:250px; } ul#table_style li.gray { background-color:#F6F6F6; } .post h2 a { border:0; } /* ---------------------------------------------------------------------- LINKS PAGE ------------------------------------------------------------------------- */ #link_pg #right_col ul { padding:0 20px 4px 0; float:none; width:100%; float:left; } #link_pg #right_col li li { background: transparent url(bg_bullet.gif) 0 11px no-repeat; float:left; line-height:1.6em; margin-left:20px; padding: 3px 0 0 13px; width:450px } #link_pg #right_col li li.linkcat { background:none; } #link_pg h2 { font-size:1.1em; padding:7px 0 0 0; } /* ---------------------------------------------------------------------- HOME PAGE ------------------------------------------------------------------------- */ #home_pg #wrap { background: url(bg_home.gif) 0 0 repeat-y; } #home_pg #header { height:310px; background: transparent url(bg_header_home.jpg) 15px 0 no-repeat; } #home_pg #header h1 { margin:205px 0 0 29px; } #home_pg #header ul { margin-top: 237px; } #home_pg #header li a { font-size:.90em; line-height:.90em; } #home_pg h2 { margin:0 0 9px 0; font-size:1.4em; line-height:2em; font-weight:bold; color:#1D4E81; } #home_pg h3#tag { float:left; width:100%; color:#C5C4C4; font-weight:normal; letter-spacing:.08em; margin-top: 18px; font-size:.75em; text-indent:0;} #home_pg h4 { font-weight:normal; font-size:1.1em; } #home_pg h4, #home_pg p.first { padding-top:0; } #home_pg ul#nav { background:url(bg_nav_home.gif) 0 0 no-repeat; } #home_pg #footer { background: transparent url(bg_footer_home.png) 0 0 no-repeat; } #home_pg #left_col { float:left; width: 318px; margin:21px 0 0 76px; background:none; padding:0; font-size:.90em; line-height:1.7em;} #home_pg #right_col { float:left; width: 410px; margin:21px 0 0 0; } #home_pg #right_col .nest, #home_pg #left_col .nest { border-left: 1px solid #000; padding:0 0 0 18px; margin-left:7px; } #home_pg img { padding: 11px 0 0 7px; } /* ---------------------------------------------------------------------- COMPANY DIRECTORY ------------------------------------------------------------------------- */ table.directory { width: 440px; padding:13px 0 0 0; margin:0; } table.directory td { border:0; background: #fff; color:#333; padding:2px 0px 2px 3px; margin:0; } table.directory td.gray { background:#F1F1EC; } table.directory td a { line-height:1.5em; } table.vac { width:480px; font-size:.90em; margin-top:11px; border:1px solid #999; } table.vac td { width:120px; height:1.5em; vertical-align:middle; text-align:center; border:1px solid #ccc; font-weight:bold; } table.vac td.hdr { background:#F6F6F6; } table.vac td.left { text-align:left; padding-left:5px; } table.vac td.tbl_head { background:#ccc; width:auto !important; /* IE you suck.. needed to take the width out of the td */} /* ___ POPUP IMAGE _____________________________________________________ .largeFloatSnp { width: 100px; height: 100px; left: 100px; position: absolute; top: 100px; }*/ .popper_handle, .popper_handle:hover { border:0; } .close { font-size:.90em; letter-spacing:1px; color:#999; } .pop { width: 100%; position: absolute; top: 0; left: 0; font-family: Arial, Verdana, sans-serif; font-size:.90em; letter-spacing:1px; color:#999; text-align: left; display: none; z-index: 1000; } .pop iframe { display:none;/*sorry for IE5*/ display/**/:block;/*sorry for IE5*/ position:absolute;/*must have*/ top:0;/*must have*/ left:0;/*must have*/ z-index:-1;/*must have*/ filter:mask();/*must have*/ width:700px;/*must have for any big value*/ height:700px;/*must have for any big value*/ } .pop .popper_close { position: absolute; right: 8px; top: 8px; width: 21px; height: 21px; background: url(bg_pop_close.gif) bottom left no-repeat; text-decoration: none; text-indent: -9999px; font-size: 1%; overflow: hidden; } .pop .rr1 { position: relative; background: url(bg_pop_tl.gif) top left no-repeat; overflow: hidden; } .pop .rr1 .rr2 { position: relative; background: url(bg_pop_bl.gif) bottom left no-repeat; } .pop .rr1 .rr2 .rr3 { position: relative; background: url(bg_pop_tr.gif) top right no-repeat; } .pop .rr1 .rr2 .rr3 .rr4 { text-align:center; position: relative; background: url(bg_pop_br.gif) bottom right no-repeat; padding: 10px; } p.for_popper { padding:0; margin: 5px 0; } #image_popper { left: 0; top: 0; width: 100%; text-align: right; height: 1px; overflow: visible; z-index: 1000; }/* Center it inside product window */ #image_popper .rr1 { margin-left: -280px; position: absolute; top: 300px; left: 45%; } #image_popper iframe { height: 600px; } #image_popper img { border: none; margin:20px; } #image_popper a { border:0; background-color:transparent; } /* ---------------------------------------------------------------------- PET GALLERY ------------------------------------------------------------------------- */ #images {float:left; margin-top:15px;} #images div {float:left; width:136px; height:136px; margin:0 10px 10px 0; padding:0; vertical-align:bottom; } #images a img {border:4px solid #ccc; padding:1px; } #images a:hover img {background:none;border:4px solid #999;} #images img {display:block; margin:auto;} .fancy_overlay a {border:0;} .fancy_overlay a:hover {background:none;}