/*----------------------------------------------------------------------------- Website Style Sheet version: 1.0 author: Bryan Miller email: bmiller@practisinc.com website: http://www.kidzdoc.com/ Description: Main CSS for website design and architecuture Copyright Practis Inc -----------------------------------------------------------------------------*/ @media screen { /* =General -----------------------------------------------------------------------------*/ html { background:#007dc4; } body { padding: 0; margin: 0; background: #f9e87f url(/images/site_design/body-bg.png) repeat-x; font: 12px Arial, Helvetica, sans-serif; color:#414141; text-align: center; /* Centered design work around for IE 5.X and 6 in quirks mode. */ min-width: 962px; /* Centered design work around for Netscape 6. */ overflow: -moz-scrollbars-vertical; } /* Class for clearing floats */ .clear { clear:both; height:0px; overflow:hidden; margin:0; padding:0;} p { margin: 0.8em 0; line-height:18px; } h1, h2, h3, h4, h5 { margin: 0.4em 0; color:#be4f4f; } h1 { font-size: 22px; } h2 { font-size: 17px; color:#3a7abf; } h3 { font-size: 15px; } h4 { font-size: 14px; } h5 { font-size: 13px; } /* =Links -----------------------------------------------------------------------------*/ a:link, a:visited, a:hover { color:#414141; text-decoration:underline; } /* =Structure -----------------------------------------------------------------------------*/ #container { /* width: 962px; */ width: 1164px; margin: 0 auto; text-align: left; /* Centered design work around for IE 5.X and 6 in quirks mode. */ } #container_bottom { padding:0 100px 0 102px; background:url(/images/site_design/container-bottom.jpg) no-repeat bottom left; min-height:500px; height:auto !important; height:500px; /* IE6 min-height work around */ } #content { width: 962px; background: url(/images/site_design/content-repeat.png) repeat-y top left; } #content_top { background:url(/images/site_design/content-top.png) no-repeat top left; } #content_bottom { padding:1px 0; /* margin-collpase fix */ background:url(/images/site_design/content-bottom.png) no-repeat bottom left; min-height:500px; height:auto !important; height:500px; /* IE6 min-height work around */ } #footer { height:218px; overflow:hidden; background:url(/images/site_design/footer-bg.png) repeat-x; } #footer_container { line-height:24px; width: 912px; margin: 0 auto; padding:45px 126px 0 126px; text-align: left; /* Centered design work around for IE 5.X and 6 in quirks mode. */ background:url(/images/site_design/footer-container-bg.jpg) no-repeat; } /* =Navigation -----------------------------------------------------------------------------*/ ul#nav_main { height:43px; margin:0; padding:0; list-style-type:none; } ul#nav_main li { height:43px; margin:0; padding:0; float:left; position:relative; overflow:hidden; } ul#nav_main li a { padding:43px 0 0 0; display:block; cursor:pointer;} * html #nav_main a:hover { background:#ccccff; cursor:pointer;} /* This is an example of what needs to be done for each li in the main navigation unordered list. You can copy this block and just change out the class name, widths and background image names/locations. */ ul#nav_main li.home { width:108px; } ul#nav_main li.home a,ul#nav_main li.home a:link { background:url(/images/site_design/buttons/btn-home.png) no-repeat; } ul#nav_main li.home a:hover,body.home ul#nav_main li.home a { background:url(/images/site_design/buttons/btn-home.png) no-repeat 0 -43px; } ul#nav_main li.meet-us { width:120px; } ul#nav_main li.meet-us a,ul#nav_main li.meet-us a:link { background:url(/images/site_design/buttons/btn-meet-us.png) no-repeat; } ul#nav_main li.meet-us a:hover,body.meet-us ul#nav_main li.meet-us a { background:url(/images/site_design/buttons/btn-meet-us.png) no-repeat 0 -43px; } ul#nav_main li.locations { width:131px; } ul#nav_main li.locations a,ul#nav_main li.locations a:link { background:url(/images/site_design/buttons/btn-locations.png) no-repeat; } ul#nav_main li.locations a:hover,body.locations ul#nav_main li.locations a { background:url(/images/site_design/buttons/btn-locations.png) no-repeat 0 -43px; } ul#nav_main li.for-parents { width:147px; } ul#nav_main li.for-parents a,ul#nav_main li.for-parents a:link { background:url(/images/site_design/buttons/btn-for-parents.png) no-repeat; } ul#nav_main li.for-parents a:hover,body.for-parents ul#nav_main li.for-parents a { background:url(/images/site_design/buttons/btn-for-parents.png) no-repeat 0 -43px; } ul#nav_main li.new-patients { width:161px; } ul#nav_main li.new-patients a,ul#nav_main li.new-patients a:link { background:url(/images/site_design/buttons/btn-new-patients.png) no-repeat; } ul#nav_main li.new-patients a:hover,body.new-patients ul#nav_main li.new-patients a { background:url(/images/site_design/buttons/btn-new-patients.png) no-repeat 0 -43px; } ul#nav_main li.forms-policies { width:190px; } ul#nav_main li.forms-policies a,ul#nav_main li.forms-policies a:link { background:url(/images/site_design/buttons/btn-forms-policies.png) no-repeat; } ul#nav_main li.forms-policies a:hover,body.forms-policies ul#nav_main li.forms-policies a { background:url(/images/site_design/buttons/btn-forms-policies.png) no-repeat 0 -43px; } ul#nav_main li.news { width:105px; } ul#nav_main li.news a,ul#nav_main li.news a:link { background:url(/images/site_design/buttons/btn-news.png) no-repeat; } ul#nav_main li.news a:hover,body.news ul#nav_main li.news a { background:url(/images/site_design/buttons/btn-news.png) no-repeat 0 -43px; } #nav_sub { height:24px; padding:0 30px 0 0; line-height:22px; overflow:hidden; text-align:right; color:#fff; } #nav_sub a, #nav_sub a:visited { color:#fff; text-decoration:none; } #nav_sub a:hover { color:#fff; text-decoration:underline; } #footer { color:#fff; } #footer a, #footer a:visited { color:#fff; text-decoration:none; } #footer a:hover { color:#fff; text-decoration:underline; } #footer .right { text-align:right; margin:-24px 0 0 0; } /* =Header -----------------------------------------------------------------------------*/ #branding { height:68px; overflow:hidden; } #branding h1 { margin:0; padding:0; float:left; display:inline; } #branding h1 a, #branding h1 a:link, #branding h1 a:visited, #branding h1 a:hover { display:block; height:0; width:435px; margin:0; padding:68px 0 0 0; overflow:hidden; cursor:pointer; background:url(/images/site_design/logo.png) no-repeat; } #branding h2 { float:right; display:inline; font-size:16px; font-weight:bold; color:#027dc3; line-height:64px; padding:0 30px 0 0; } /* =Three Column -----------------------------------------------------------------------------*/ #three_column #content { position:relative; } #three_column #branding_sub { margin:5px 0 0 6px; } #three_column #branding_sub #flash { float:left; display:inline; width:682px; height:227px; overflow:hidden; } #three_column #branding_sub #quick_find { float:left; display:inline; width:263px; height:226px; margin:0 0 0 5px; background:url(/images/site_design/quick-find-bg.png) repeat-y; border-bottom:1px solid #f5cdd1; overflow:hidden; } #three_column #branding_sub #quick_find h2 { height:0; margin:0; padding:46px 0 0 0; overflow:hidden; background:url(/images/site_design/txt-quick-find.png) no-repeat; } #three_column #branding_sub #quick_find ul { margin:2px 1px; } #three_column #branding_sub #quick_find li { font-size:14px; padding:0 0 0 30px; line-height:29px; border-bottom:2px solid #fff; background:url(/images/site_design/bullet-heart.png) no-repeat 15px 12px; } #three_column #branding_sub #quick_find li a, #three_column #branding_sub #quick_find li a:visited { color:#414141; text-decoration:none; } #three_column #branding_sub #quick_find li a:hover { color:#414141; text-decoration:underline; } #three_column #content_main { float:left; display:inline; width:672px; height:300px; height:auto !important; min-height:300px; margin:10px 0 0 6px; background: url(/images/site_design/content-main-bg-3col.jpg) no-repeat bottom left; } #three_column #content_main #welcome { float:left; display:inline; width:430px; } #three_column #content_main #welcome .text_content { padding:7px 5px 10px 16px; } #three_column #content_main #welcome h2 { height:0; margin:0; padding:44px 0 0 0; overflow:hidden; background:url(/images/site_design/txt-welcome.png) no-repeat; } #welcome p { font-size:14px; line-height:22px; } #three_column #content_main #featured_topics { float:left; display:inline; width:226px; margin:0 0 0 14px; } #three_column #content_main #featured_topics .text_content { padding:10px 5px 10px 13px; } #three_column #content_main #featured_topics h2 { height:0; margin:0; padding:46px 0 0 0; overflow:hidden; background:url(/images/site_design/txt-featured-topics.png) no-repeat; } #three_column #content_main #featured_topics h3 { margin:0.2em 0; font-size:18px; color:#007cc2; } #three_column #content_main #featured_topics p { margin:0.2em 0; line-height:18px; } #three_column #content_main #featured_topics a, #three_column #content_main #featured_topics a:visited { color:#007cc2; text-decoration:none; } #three_column #content_main #featured_topics a:hover { color:#007cc2; text-decoration:underline; } #three_column #content_sub { float:right; display:inline; width:263px; margin:10px 6px 0 0; background:url(/images/site_design/whats-new-bg.png) repeat-y; border-bottom:1px solid #b1ec99; } #three_column #content_sub h2 { height:0; margin:0; padding:46px 0 0 0; overflow:hidden; background:url(/images/site_design/txt-whats-new.png) no-repeat; } #three_column #content_sub ul { margin:0; padding:2px 1px 7px 1px; } #three_column #content_sub li { line-height:18px; margin:0; padding:5px 13px 5px 13px; border-bottom:2px solid #fff; } #three_column #content_sub a, #three_column #content_sub a:visited { color:#414141; text-decoration:none; } #three_column #content_sub a:hover { color:#414141; text-decoration:underline; } #three_column #content_supp { clear:right; float:right; display:inline; width:250px; color:#007cc4; margin:10px 10px 0 0; } #three_column #content_supp p { line-height:16px; margin:2px 0; } /* =Two Column -----------------------------------------------------------------------------*/ #two_column #content { position:relative; } #two_column #content_main { float:right; display:inline; width:650px; margin:0 6px 0 0; padding:15px 15px 40px 15px; min-height:500px; height:auto !important; height:500px; /* IE6 min-height work around */ background:url(/images/site_design/content-main-bg-2col.jpg) no-repeat bottom left; } #two_column #content_sub { float:left; display:inline; width:263px; margin:6px 0 0 6px; } #two_column #content_sub #banner_image { height:198px; width:263px; overflow:hidden; background:url(/images/site_design/banners/banner-default.jpg) no-repeat; } #two_column.meet-us #content_sub #banner_image { height:198px; width:263px; overflow:hidden; background:url(/images/site_design/banners/banner-img1.jpg) no-repeat; } #two_column.locations #content_sub #banner_image { height:198px; width:263px; overflow:hidden; background:url(/images/site_design/banners/banner-img3.jpg) no-repeat; } #two_column.for-parents #content_sub #banner_image { height:198px; width:263px; overflow:hidden; background:url(/images/site_design/banners/banner-img2.jpg) no-repeat; } #two_column.new-patients #content_sub #banner_image { height:198px; width:263px; overflow:hidden; background:url(/images/site_design/banners/banner-img1.jpg) no-repeat; } #two_column.forms-policies #content_sub #banner_image { height:198px; width:263px; overflow:hidden; background:url(/images/site_design/banners/banner-img4.jpg) no-repeat; } #two_column.news #content_sub #banner_image { height:198px; width:263px; overflow:hidden; background:url(/images/site_design/banners/banner-img1.jpg) no-repeat; } #two_column.contact-us #content_sub #banner_image { height:198px; width:263px; overflow:hidden; background:url(/images/site_design/banners/banner-img2.jpg) no-repeat; } #two_column #content_sub #in_this_section { width:263px; margin:10px 0 0 0; background:url(/images/site_design/in-this-section-bg.png) repeat-y; border-bottom:1px solid #f7d7da; min-height:200px; height:auto !important; height:200px; /* IE6 min-height work around */ } #two_column #content_sub #in_this_section h2 { height:0; margin:0; padding:46px 0 0 0; overflow:hidden; background:url(/images/site_design/txt-in-this-section.png) no-repeat; } #two_column #content_sub #in_this_section ul { width:261px; margin:0 1px; overflow:hidden; } #two_column #content_sub #in_this_section li { width:261px; margin:0; overflow:hidden; } #two_column #content_sub #in_this_section ul ul { border-bottom:2px solid #fff; } #two_column #content_sub #in_this_section li a, #two_column #content_sub #in_this_section li a:visited { display:block; width:241px; margin:0; padding:5px 5px 5px 15px; line-height:18px; text-decoration:none; border-bottom:2px solid #fff; color:#414141; background:transparent; } #two_column #content_sub #in_this_section li a:hover { display:block; width:241px; margin:0; padding:5px 5px 5px 15px; line-height:18px; text-decoration:none; border-bottom:2px solid #fff; color:#414141; background:#febcc3; } #two_column #content_sub #in_this_section li li a, #two_column #content_sub #in_this_section li li a:visited { display:block; width:231px; margin:0; padding:3px 5px 3px 25px; line-height:18px; text-decoration:none; border:0; color:#414141; background:transparent url(/images/site_design/bullet-its.gif) no-repeat 16px 12px; } #two_column #content_sub #in_this_section li li a:hover { display:block; width:231px; margin:0; padding:3px 5px 3px 25px; line-height:18px; text-decoration:none; border:0;color:#414141; background:#febcc3 url(/images/site_design/bullet-its.gif) no-repeat 16px 12px; } #two_column #content_sub #callouts { width:263px; margin:20px 0 0 0; overflow:hidden; } #two_column #social_links { clear:right; float:right; display:inline; width:250px; color:#FFF; margin:10px 10px 0 0; } #two_column #social_links p { line-height:16px; margin:2px 0; } /* =Forms -----------------------------------------------------------------------------*/ form { padding: 0.4em; margin: 0; } form em { color: #FF0000; } form p { clear: left; margin: 0; padding: 0; padding-top: 0.4em; } form p label { float: left; width: 25%; } fieldset { margin: 0.8em 0; padding: 0.6em; border:1px solid #ccc; } fieldset legend { padding:0 5px; margin-bottom: 0.2em; font-weight: bold; color: #000000; font-size: 1.1em; } input.txt { width: 200px; } textarea { width: 300px; height: 100px; } .formerror { border: 1px solid red; background-color : #FFCCCC; width: auto; padding: 0.4em; margin-bottom: 0.4em; } .formerror ul { padding-left: 1.7em; } blockquote { margin:0 20px; } /* =Tables -----------------------------------------------------------------------------*/ td { text-align: left; vertical-align: top; } /* Striped Tables */ table.stripeMe { border:1px solid #46C1E3; } table.stripeMe tr th { padding:2px; background:#46C1E3; border:1px solid #46C1E3; color:#FFF; font-weight:bold; } table.stripeMe tr td { padding:2px; background:#FFF; border:1px solid #46C1E3; color:#414141; } table.stripeMe tr.alt td { background:#E6F7FB; } /* =Lists -----------------------------------------------------------------------------*/ #content_main ul { list-style-type:disc; margin:0 0 0 40px; } #content_main ol { list-style-type:decimal; margin:0 0 0 40px; } #content_main li { line-height:18px; margin:0.4em; } /* =Driving Directions -----------------------------------------------------------------------------*/ #driving_directions { margin:10px 0 0 0; padding:0; border:0; width:230px; background:url(/images/site_design/driving-directions/driving-directions-bg.gif) repeat-y top left; overflow:hidden; float:right; display:inline;} #driving_directions .dd-top { background:url(/images/site_design/driving-directions/driving-directions-top.gif) no-repeat top left; } #driving_directions .dd-bottom { background:url(/images/site_design/driving-directions/driving-directions-bottom.gif) no-repeat bottom left; min-height:230px; height:auto !important; height:230px; } #driving_directions h2 { width:203px; height:30px; margin:0 auto; padding:0; position:relative; overflow:hidden; } #driving_directions h2 span { width:100%; height:100%; position:absolute; background:url(/images/site_design/driving-directions/txt-driving-directions.gif) no-repeat; } #driving_directions form { font-size:12px; font-weight:normal; padding:10px 15px; } #driving_directions form input { margin:4px 0px; } /* =Misc 1 -----------------------------------------------------------------------------*/ .question { background: #FF0000; } .highlight { font-weight:bold; background:#FFFF00; } .vcard { margin:0px; } /* For Parents Feature */ .feature { background:#FEF0D8; padding:1px 10px; } }