/* File: custom.css Description: Custom styles for the Thesis Theme that you define Use: If you have enabled the custom stylesheet in the Thesis options panel, the tag will be appended with the "custom" class, like so: . You can use the "custom" class to overwrite *any* CSS declarations contained in the style.css file. For example, if you wish to change the default link color to green, you would add the following declarations to this file: .custom a, .custom a:visited { color: #090; } <--- This makes links green .custom a:hover { color: #00f; } <--- This makes links blue when you mouse over them Why this works: By using the "custom" class, you are creating more specific CSS declarations for HTML elements. CSS styling is applied through rules of specificity, and because declarations prepended with .custom are more specific, they get applied when the page is rendered! */ /* This line sets up our clickable background image based on the site title's link */ /* DIY: Adjust the height & width attributes to reflect the actual size of your image */ /* DIY: Change the filename of your image to reflect the actual header's file name */ /* This line removes the padding from the header so that the background image sits close to the nav menu, the bottom border of the header, and the sides of the content */ .custom #header { padding: 0; } /* - - custom styles - -*/ /* reset styles */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } /* remember to define focus styles! */ :focus { outline: 0; } /* remember to highlight inserts somehow! */ ins { text-decoration: none; } del { text-decoration: line-through; } table tr td { padding: 5px; border: 1px solid #ccc; } /* reset end */ /* text styles start */ body { font: 13px/1.5 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif; } a:focus { outline: 1px dotted; } hr { border: 0 #ccc solid; border-top-width: 1px; clear: both; height: 0; } /* `Headings ----------------------------------------------------------------------------------------------------*/ h1 { font-size: 25px;} h2 { font-size: 23px;} h3 { font-size: 21px;} h4 { font-size: 19px;} h5 { font-size: 17px;} h6 { font-size: 15px;} /* `Spacing ----------------------------------------------------------------------------------------------------*/ ol { list-style: decimal;} ul { list-style: disc;} p, dl, hr, h1, h2, h3, h4, h5, h6, ol, ul, pre, table, address, fieldset { margin-bottom: 20px; } /* text styles end */ /* 960 styles begin (structure) -----------------------------------------------------------------------------------------------------*/ .container_12, .container_16 { margin-left: auto !important; margin-right: auto !important; width: 960px; } .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12, .grid_13, .grid_14, .grid_15, .grid_16 { display: inline; float: left; position: relative; margin-left: 10px; margin-right: 10px; } .container_12 .grid_3, .container_16 .grid_4 { width: 220px; } .container_12 .grid_6, .container_16 .grid_8 { width: 460px; } .container_12 .grid_9, .container_16 .grid_12 { width: 700px; } .container_12 .grid_12, .container_16 .grid_16 { width: 940px; } /* `Grid >> Children (Alpha ~ First, Omega ~ Last) */ .alpha { margin-left: 0;} .omega { margin-right: 0;} /* `Grid >> 12 Columns */ .container_12 .grid_1 { width: 60px;} .container_12 .grid_2 { width: 140px;} .container_12 .grid_4 { width: 300px;} .container_12 .grid_5 { width: 380px;} .container_12 .grid_7 { width: 540px;} .container_12 .grid_8 { width: 620px;} .container_12 .grid_10 { width: 780px;} /* `Grid >> 16 Columns */ .container_16 .grid_1 { width: 40px;} .container_16 .grid_2 { width: 100px;} .container_16 .grid_3 { width: 160px;} .container_16 .grid_5 { width: 280px;} .container_16 .grid_6 { width: 340px;} .container_16 .grid_7 { width: 400px;} .container_16 .grid_9 { width: 520px;} .container_16 .grid_10 { width: 580px;} .container_16 .grid_11 { width: 640px;} .container_16 .grid_13 { width: 760px;} .container_16 .grid_14 { width: 820px;} .container_16 .grid_15 { width: 880px;} .clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } .clearfix:after { clear: both; content: ' '; display: block; font-size: 0; line-height: 0; visibility: hidden; width: 0; height: 0; } * html .clearfix, *:first-child+html .clearfix { zoom: 1; } #header_area, #footer { display: none; } /* custom styles end - */ /* main styles */ body { background: #F4F9FF url("/res/images/grad-back.jpg") repeat-x; color: #000; } .header-wrap, .search-section-wrap, .content-wrap, .footer-wrap { float: left; width: 100%; } #footer_area { position: relative; top: -55px; } .header-background { padding: 0; margin: 0; background: url("/res/images/nav-background-blog-new.png") no-repeat center top; width: 100%; height:230px; display: table; } .header { position: relative;} .logo { position: absolute; top: -1px; left: 0; width: 200px; } .logo h1 { background: url("/res/images/petsit-logo.png") no-repeat; width: 200px; height: 124px; display: block; text-indent: -9999em; margin: 0; } a:focus { position: relative; top: 1px; } a:focus, a:active { outline: none; } h2#slogan { font-family: "ff-meta-serif-web-pro-1","ff-meta-serif-web-pro-2","Georgia",serif; font-family: Georgia; font-size: 1.2em; font-weight: normal; line-height: 1; margin: 0px; padding: 0; color: #4c4008; text-shadow: 0px 1px 0px #fff; position: absolute; top: 72px; left: 240px; text-indent: -9999em; } #slogan span.amp { line-height: 0.95; vertical-align: top; } span.amp { font-family: Baskerville,"Goudy Old Style","Palatino","Book Antiqua",serif; font-size: 1.4em; font-style: italic; font-weight: normal; } .navigation-wrap { padding: 25px 0 0 240px; float: left; } .nav-menu ul { list-style-type: none; margin: 0; } .nav-menu ul li { float: left; margin: 0 30px 0 0; } .nav-menu ul li a { background: url("/res/images/nav-new.png") no-repeat; display: block; height: 14px; text-indent: -9999em; color: #fff; overflow: hidden; } .nav-menu ul li.home { width: 42px;} .nav-menu ul li.home a { background-position: 0 0;} .nav-menu ul li.home a:hover, .nav ul li.home a.active { background-position: 0 -14px;} .nav-menu ul li.about { width: 52px;} .nav-menu ul li.about a { background-position: -42px 0;} .nav-menu ul li.about a:hover, .nav ul li.about a.active { background-position: -42px -14px;} .nav-menu ul li.resources { width: 169px;} .nav-menu ul li.resources a { background-position: -93px 0;} .nav-menu ul li.resources a:hover, .nav ul li.resources a.active { background-position: -93px -14px;} .nav-menu ul li.blog { width: 37px;} .nav-menu ul li.blog a { background-position: -262px 0;} .nav-menu ul li.blog a:hover, .nav ul li.blog a.active { background-position: -262px -14px;} .nav-menu ul li.member { width: 132px;} .nav-menu ul li.member a { background-position: -299px 0;} .nav-menu ul li.member a:hover, .nav ul li.links a.active { background-position: -299px -14px;} .nav-menu ul li.contact { width: 72px;} .nav-menu ul li.contact a { background-position: -432px 0;} .nav-menu ul li.contact a:hover, .nav ul li.contact a.active { background-position: -432px -14px;} .img-collage { background: #fff url("/res/images/img-collage.jpg") no-repeat; background-position: -10px -45px; margin-top: -13px; float: left; width: 100%; } .search-form { background: url("/res/images/search-cont.png") no-repeat; width: 529px; height: 291px; float: right; position:relative; right: -6px; } .search-interior { padding: 10px 35px 10px 35px; } h2.locate { color: #fff; font-weight: bold; font-family: "Gill Sans MT", Verdana, Helvetica; text-transform: uppercase; font-size: 1.85em; text-shadow: 0px 1px 0px #000; text-align: center; } .search-info { width: 175px; float: left; } .search-info p { color: #fff; font-size: 1.45em; line-height: 1.7em; padding-top: 10px; } .act-form { width: 264px; float: left; margin-bottom: 15px; } .content-background { background: #fff url("/res/images/content-background.png") no-repeat; } .content-int { padding: 20px 25px 25px 25px; } h3.homepage-title { color: #5b768d; letter-spacing: -1px; font-size: 1.75em; line-height: 120%; } ul { list-style-type: none; margin: 0px 0 15px 0; } ul.paw-bull li { background: url("/res/images/paw-bull.gif") no-repeat; display: block; margin-left: 15px; padding: 0 0 10px 20px; line-height:140%; } .metro-back { background: url("/res/images/metro-background.png") no-repeat; float: left; } .metro-int { padding: 0 10px 0 10px; } h4.metro-info { font-size: 1.20em; line-height: 130%; padding: 10px 0 10px 0; color: #001f3e; text-shadow: 0px 1px 0px #fff; } ul.side-menu li { margin: 0 0 0 0px; position: relative; } ul.side-menu li h3, ul.side-menu li p { padding: 0 10px 0 70px; } ul.side-menu li img { position: absolute; top: 20px; left: 10px; } .blog-side-nav { float: left; } h3.blog-locate { color: #fff; font-weight: bold; font-size: 2.25em; font-variant: normal; letter-spacing: normal; font-family: "Gill Sans MT",Verdana,Helvetica; text-transform: uppercase; text-align: center; text-shadow: 0px 1px 0px #000; margin-top: 10px; } .blog-side-nav ul li { background: url("/res/images/blog-sidebar.png") no-repeat; height: 56px; background-position: 0 0; width: 267px; position: relative; } .blog-side-nav ul li:hover { background-position: 0 -55px; } .blog-side-nav ul li h3 { font-family: Helvetica, Arial; font-size: 1.3em; font-variant: normal; letter-spacing: normal; padding-top:20px; } .blog-side-nav ul li h3 a { font-weight: bold; padding: 0 10px 0 54px; color: #BA1000; } .sidebar_list li.widget h3 { font-size: 1.55em; font-weight: bold; font-variant: normal; letter-spacing: -1px; color: #000; margin-bottom: 10px; } form.search_form input#s { padding-left: 5px; } .recent-entries { border: 1px solid #DBECFF; background: #F0F7FF; float: left; } .recent-entries h3 { background: url("/res/images/dash.png") no-repeat left bottom; padding: 5px 0 10px 0; text-align: center; font-size: 2.15em; font-variant: normal; font-weight: bold; letter-spacing: -1px; color: #001F3E; } .recent-entries ul { padding: 10px; } .recent-entries ul li { list-style-type: none; background: url("/res/images/arrow.png") no-repeat; display: block; line-height: 140%; margin-left: 5px; padding: 0 0 10px 20px; } .recent-entries li { list-style-type: none; } .recent-entries li.widget ul li a { color: #001F3E; font-family: "Helvetica Neue",Helvetica,Arial,sans; font-size: 1.25em; font-weight: lighter; text-decoration: none; } .blog-side-nav ul li h3 a:hover { text-decoration: none; } .blog-side-nav ul li img { left: 5px; position: absolute; top: 10px; } .side-menu-wrap h3 { margin-bottom: 0; } .side-menu-wrap h3 a { text-decoration: none; color: #ba1000; font-size: .80em; } .side-menu li { background: url("/res/images/sections.jpg") no-repeat; height: 81px; background-position: 0 0; width: 380px; line-height: 100%; } .side-menu li.last-li { height: 82px; } .side-menu li:hover { background-position: 0 -81px; } .latest-news { background: #f0f7ff; border: 1px solid #dbecff; } .latest-news h3 { color: #001F3E; background: url("/res/images/dash.png") no-repeat bottom left; padding: 5px 0 10px 0; text-align: center; font-size: 1.85em; } .latest-news ul li { background: url("/res/images/arrow.png") no-repeat; display: block; margin-left: 15px; padding: 0 0 10px 20px; line-height:140%; } .latest-news ul li a { font-family: "Helvetica Neue", Helvetica, Arial, sans; color: #001F3E; text-decoration: none; font-weight: lighter; font-size: 1.25em; } .act-form label { color: #fff; font-weight: bold; font-size: 1.75em; text-shadow: 0px 1px 0px #000; } .label-input-row { display: inline; float:left; margin-bottom: 10px; } .home-input { margin-left: 0; margin-right: 0; width: 250px; display: inline; float: left; background: #fff; height: 16px; } .label-input-row input.fetch-button { border: none; background: none; } /* drop down */ .nav li:hover>ul {display:block} .pcm{display:none;} .nav ul{display:none} .nav li:hover>ul{display:block} .nav ul{position: absolute;left:0px;top:100%;} .nav ul ul{position: absolute;left:100%;top:10px;} .nav,.nav ul { margin:0px; list-style:none; padding:0px 0px 0px 0px; } .sub { padding-right: 0; padding-bottom: 0; } .nav table {border-collapse:collapse} .nav ul { width: 190px; margin-top: 0px; } .nav a:active, #nav a:focus { outline-style:none; } .nav a, #nav li.dis a:hover, #nav li.sep a:hover { display:block; vertical-align:middle; text-align:left; text-decoration:none; padding-left:0; text-decoration:none; cursor:default; } .nav span{ overflow:hidden; } .nav ul li { float:none; } .nav li.sep { text-align:center; padding:0px; line-height:0; height:100%; } .nav li:hover{ position:relative; } .nav li ul li { background: #5C7B99; border-bottom: 1px solid #001c3e; color:#fff; } .menu ul.nav li ul li { float: none; margin: 0 5px; } ul.sub li a { padding: 5px 5px 5px 10px; font-size: 11px; } ul.sub li a:hover { color: #fff; } .nav li ul li:hover { background: #001F3E; } .nav li ul li a { background-image: none; height: 20px; text-indent: 0 !important; } .nav ul a { text-align:left; white-space:nowrap; padding: 10px 0px 0 10px; } .nav li:hover>a{ text-decoration:none; } .nav li a:hover{ position:relative; color: #ffffff; text-decoration:none; } ul.sub li { z-index: 1; } .nav li.dis a { color: #AAAAAA !important; } .nav img {border: none;float:left;_float:none; margin-right:4px;} } .nav img.over{display:none} .nav li.dis a:hover img.over{display:none !important} .nav li.dis a:hover img.def {display:inline !important} .nav li:hover > a img.def {display:none} .nav li:hover > a img.over {display:inline} .nav a:hover img.over,.nav a:hover ul img.def,.nav a:hover a:hover ul img.def,.nav a:hover a:hover a:hover ul img.def,.nav a:hover a:hover img.over,#nav a:hover a:hover a:hover img.over,ul.pureCssMenu a:hover a:hover a:hover a:hover img.over{display:inline} .nav a:hover img.def,.nav a:hover ul img.over,.nav a:hover a:hover ul img.over,.nav a:hover a:hover a:hover ul img.over,.nav a:hover a:hover img.def,.nav a:hover a:hover a:hover img.def,.nav a:hover a:hover a:hover a:hover img.def{display:none} .nav a:hover ul,.nav a:hover a:hover ul,.nav a:hover a:hover a:hover ul{display:block} .nav a:hover ul ul,.nav a:hover a:hover ul ul{display:none} .sub .sub-sub li { background: #656400 !important; } .sub .sub-sub li:hover { background: #9A9901 !important; } /* dop down styles end */ .footer-background { background: url("/res/images/footer.png") no-repeat bottom center; padding: 0; margin: 0; width: 100%; display: table; height: 182px; margin-bottom: -50px; } .footer { padding: 20px 10px 10px 10px; } .footer h3 { color: #fff; text-shadow: 0px 1px 0px #000; font-size: 1.75em; margin: 0 0 7px 0; font-weight: bold; } .footer h4 { color: #fff; text-shadow: 0px 1px 0px #000; font-size: 1.35em; margin: 0 0 7px 0; } .footer a { color: #b4d3f3; text-decoration: underline; } .bottom-nav { color:#FFFFFF; } .bott-nav { border-bottom: 1px solid #7b9dc1; } .bott-nav p { line-height: 1.75em; padding-bottom: 14px; } .bottom-nav a { color: #b4d3f3; text-decoration: none; text-transform: uppercase; font-weight: bold; } .social p { line-height: 1.5em; margin-bottom: 20px; } .member-login p { margin-bottom: 20px; } .copyright, .social, .member-login { color: #b4d3f3; } /* - - social links styles - -*/ ul.socialize { list-style-type: none; margin-top: 15px; } ul.socialize li { margin-left: 0; float: left; } ul.socialize li a { background: url("/res/images/social.png") no-repeat; display: block; float: left; height: 32px; width: 32px; text-indent: -9999em; overflow: hidden; margin-right: 8px; } h4.blog-page-header { color: #001F3E; font-size: 1.25em; line-height:125%; } ul.socialize li.facebook a { background-position: 0px -32px;} ul.socialize li.facebook a:hover { background-position: 0px -32px;} ul.socialize li.tweet a { background-position: -32px -32px;} ul.socialize li.tweet a:hover { background-position: -32px -32px;} ul.socialize li.flick a { background-position: -64px -32px;} ul.socialize li.flick a:hover { background-position: -64px -32px;} ul.socialize li.fm a { background-position: -96px -32px;} ul.socialize li.fm a:hover { background-position: -96px -32px;} /* -- social link styles end -- */ /* ad styles */ .ad-one, .ad-two { float: left; } .ad-two { margin-left: 10px; } .ad-section { float: left; width: 100%; margin-top: 5px; }