/* ---------------------------------------------------------- Dogs Change Lives // Keystone Human Services CSS Managed by: Blue State Digital Last Update: January 2010 TABLE OF CONTENT 01 - GLOBAL BROWSER RESET 02 - COMMON STYLE 03 - LAYOUT 04 - HOMEPAGE 05 - SUBPAGES 06 - FRAMEWORK 07 - UTILITY COLOR GUIDE (Main Site Colors and their Hex Codes) ---------------------------------------------------------- */ /* 01 =GLOBAL BROWSER RESET ---------------------------------------------------------- */ /* YUI Reset version: 2.7.0 */ html { color: #000; background: #FFF; } body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td { margin: 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } fieldset,img { border: 0; } address,caption,cite,code,dfn,em,strong,th,var,optgroup { font-style: inherit; font-weight: inherit; } del,ins { text-decoration: none; } li { list-style: none; } caption, th { text-align: left; } h1,h2,h3,h4,h5,h6 { font-size: 100%; font-weight: normal; } q:before, q:after { content: ''; } abbr,acronym { border: 0; font-variant: normal; } sup { vertical-align: baseline; } sub { vertical-align: baseline; } /*because legend doesn't inherit in IE */ legend { color: #000; } input,button,textarea,select,optgroup,option { font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; } /*@purpose To enable resizing for IE */ /*@branch For IE6-Win, IE7-Win */ input,button,textarea,select { *font-size: 100%; } /* 02 =COMMON STYLE ---------------------------------------------------------- */ html { background: url(/page/-/images/body_pattern.png); } body { background: url(/page/-/images/body_line.png) repeat-x center top; font-family: "Helvetica", "Arial", sans-serif; font-size: 12px; color: #4a4a4a; } .base h1 { color: #2d7b75; text-transform: lowercase; font-weight: 900; font-size: 30px; margin: 0 0 10px; } .base h2 { color: #2d7b75; font-size: 16px; font-weight: bold; margin: 10px 0; } .base h3 { font-size: 14px; font-weight: bold; margin: 10px 0; color: #88c8c2; } .base h4 { font-weight: bold; } .base p { line-height: 18px; margin: 10px 0; } a { text-decoration: none; color: #34756e; font-weight: bold; } a:hover { text-decoration: underline; color: #88c8c2; } blockquote { background: #e0f0ee; padding: 25px; margin: 25px 0; line-height: 16px; } .base ul, ol { margin: 10px 0 10px 50px; } .base ul li { list-style: square outside; } .base ol li { list-style: decimal outside; } .base ul li, .base ol li { margin: 5px 0; } .base li ol { margin: 10px 0 10px 50px; } .base li ol li { list-style: lower-alpha outside; } .base li ul { margin: 10px 0 10px 50px; } .base li ul li { list-style: circle outside; } /* 03 =LAYOUT ---------------------------------------------------------- */ #container { width: 100%; background: url(/page/-/images/body_bkgd.png) no-repeat center 15px; } #header { width: 1028px; margin: 0 auto; height: 163px; padding: 15px 0 0; background: url(/page/-/images/header.png) no-repeat center 15px; } #header #header-title { display: block; float: left; width: 500px; height: 106px; text-indent: -9999em; overflow: hidden; } #header form#qksignup { float: right; } #header form#qksignup legend { line-height: 0; text-indent: -9999em; overflow; hidden; } #header form#qksignup input { color: #6c6c6c; padding: 3px 5px 1px; position: relative; top: 20px; } #header form#qksignup input#qksignup-submit { top: 35px; } #header ul#nav { clear: both; background: url(/page/-/images/nav.png) no-repeat center; width: 978px; height: 57px; padding: 0 25px; } #header ul#nav li { float: left; font-size: 16px; text-transform: uppercase; font-weight: 700; } #header ul#nav li a { height: 57px; line-height: 45px; padding: 0 34px; color: #68b3ac; } #header ul#nav li a:hover { text-decoration: none; color: #306964; } #main { width: 948px; margin: 0 auto; background: url(/page/-/images/main.png) repeat-y center; padding: 25px 40px; } #main #content { background: #eff9f8; -moz-border-radius: 5px; float: left; width: 523px; padding: 25px; } #main #sidebar { background: #eff9f8; -moz-border-radius: 5px; float: right; width: 350px; padding: 25px 0; } #sidebar #sidebar-buttons a { display: block; width: 310px; height: 35px; margin: 0 0 10px; font-weight: 900; font-size: 26px; color: #fff; padding: 20px; line-height: 35px; text-transform: uppercase; } #sidebar #sidebar-buttons a:hover { text-decoration: none; } #sidebar #sidebar-buttons a#sidebar-buttons-share { background: url(/page/-/images/sidebar_share.png) no-repeat center 0; } #sidebar #sidebar-buttons a#sidebar-buttons-share:hover { background: url(/page/-/images/sidebar_share.png) no-repeat center -75px; } #sidebar #sidebar-buttons a#sidebar-buttons-spread { background: url(/page/-/images/sidebar_spread.png) no-repeat center 0; } #sidebar #sidebar-buttons a#sidebar-buttons-spread:hover { background: url(/page/-/images/sidebar_spread.png) no-repeat center -75px; } #sidebar #sidebar-socnet { width: 334px; margin: 0 auto; } #sidebar #sidebar-socnet a { width: 159px; height: 65px; display: block; text-indent: -9999em; overflow: hidden; } #sidebar #sidebar-socnet a#sidebar-socnet-fb { float: left; background: url(/page/-/images/share_facebook.png) no-repeat 0 0; width: 149px; padding: 0 10px 0 0; } #sidebar #sidebar-socnet a#sidebar-socnet-fb:hover { background: url(/page/-/images/share_facebook.png) no-repeat 0 -65px; } #sidebar #sidebar-socnet a#sidebar-socnet-tw { float: right; background: url(/page/-/images/share_twitter.png) no-repeat 0 0; } #sidebar #sidebar-socnet a#sidebar-socnet-tw:hover { background: url(/page/-/images/share_twitter.png) no-repeat 0 -65px; } #sidebar .sidebar-content { padding: 10px; margin: 25px 25px 0; -moz-border-radius: 5px; background: #e0f0ee; } #sidebar .sidebar-content h2 { text-transform: uppercase; margin: 0; background: #88c8c2; -moz-border-radius: 3px; padding: 5px; text-align: center; color: #fff; } #sidebar .sidebar-content h2 a { color: #fff; } #sidebar .sidebar-content ul { margin: 10px 0; } #sidebar .sidebar-content li { list-style: none; margin: 5px 0; } #sidebar .sidebar-content li a { font-size: 14px; color: #4a4a4a; } #sidebar .sidebar-content li a:hover { color: #88c8c2; } #sidebar #sidebar-search form { padding: 10px 0; } #sidebar #sidebar-search #sidebar-search-text { color: #6c6c6c; padding: 5px; width: 205px; } #sidebar #sidebar-search #sidebar-search-submit { background: #2D7B75; border: none; -moz-border-radius: 3px; color: #fff; text-transform: lowercase; padding: 5px; font-weight: bold; } #sidebar #sidebar-leaderboard ol { margin: 0; } #sidebar #sidebar-leaderboard li { } #sidebar #sidebar-leaderboard li .votes-number { color: #fff; background: #2d7b75; -moz-border-radius: 3px; font-weight: bold; width: 20px; height: 20px; display: block; float: left; line-height: 20px; text-align: center; } #sidebar #sidebar-leaderboard li a { padding: 0 0 0 10px; line-height: 23px; } #sidebar #sidebar-leaderboard li.read-more { text-align: center; } #sidebar #sidebar-leaderboard li.read-more a { padding: 0; color: #34756E; } #sidebar #sidebar-random ul { margin: 10px 20px; } #sidebar #sidebar-random ul li { list-style: square outside; margin: 10px 0; } #sidebar #sidebar-blog { background: #fff url(/page/-/images/sidebar_blog.png) no-repeat center 95%; margin: 25px 25px 0; padding: 10px; } #sidebar #sidebar-blog h2 { } #sidebar #sidebar-blog ul { padding: 0 0 50px; } #sidebar #sidebar-blog li { margin: 10px 0; padding: 0 0 5px; border-bottom: 1px dotted #88c8c2; } #footer { width: 1028px; margin: 0 auto; background: url(/page/-/images/footer.png) no-repeat center top; } #footer p { text-align: center; padding: 25px 0; color: #fff; text-transform: uppercase; font-size: 10px; } #contest .entry { background: #e0f0ee; -moz-border-radius: 5px; margin: 10px 0; position: relative; } #contest .contest-votes { text-align: center; float: left; font-size: 14px; color: #2d7b75; text-transform: uppercase; font-weight: 900; width: 60px; padding: 10px; line-height: 14px; } #contest .contest-votes .contest-votes-number { font-size: 38px; line-height: 36px; } #contest .contest-votes-link { font-size: 10px; text-transform: lowercase; display: block; background: #2d7b75; padding: 5px; border: 1px solid #2d7b75; -moz-border-radius: 3px; font-family: "Helvetica", "Arial", sans-serif; position: absolute; top: 68px; left: 22px; } #contest .contest-votes-link:hover { border: 1px solid #88c8c2; } #contest .contest-votes-link a { color: #fff; } #contest .contest-votes .contest-votes-link { margin: 5px auto 0; position: relative; top: auto; left: auto; } #contest .contest-photo { float: left; width: 80px; height: 100px; } #contest .contest-photo a { width: 80px; height: 100px; text-indent: -9999em; overflow: hidden; display: block; background: url(/page/-/images/pawprint_placeholder.png/@my100) no-repeat center; } #contest .contest-video { float: none; text-align: center; margin: 0 auto 20px; background: #C0E5E2; -moz-border-radius: 5px; padding: 10px; } #contest .contest-story { padding: 10px 10px 10px 0; width: 343px; float: right; } #contest .contest-story h3 { color: #4a4a4a; font-weight: bold; font-size: 16px; margin: 0 0 5px; } #contest .contest-story p { margin: 0; line-height: 14px; } #contest .no-votes .contest-story { width: 503px; } #content .no-votes .contest-photo { width: 80px; padding: 0 0 0 10px; } #contest .no-votes .contest-story { width: 413px; } /* 04 =HOMEPAGE ---------------------------------------------------------- */ #home #contest h2 { background: #2d7b75; -moz-border-radius: 3px; padding: 5px; text-transform: uppercase; color: #fff; } #home #contest a#see-all { text-transform: uppercase; color: #2d7b75; font-size: 14px; background: #e0f0ee; padding: 8px 5px 5px; float: right; -moz-border-radius: 5px; } /* 05 =SUBPAGES ---------------------------------------------------------- */ #stories.index #contest { margin: 25px 0 0; } #stories.entries #contest h1 { float: left; } #stories.entries #contest .contest-votes { float: right; width: auto; padding: 0; } #stories.entries #contest .contest-votes .contest-votes-number { display: inline; float: right; font-size: 16px; margin: 2px 0 0; padding: 10px; background: #e0f0ee; -moz-border-radius: 5px; line-height: 16px; } #stories.entries #contest .contest-votes .contest-votes-link { display: inline; float: right; background: transparent; padding: 0; margin: 0; border: none; } #stories.entries #contest .contest-votes .contest-votes-link:hover { border: none; } #stories.entries #contest .contest-votes .contest-votes-link a { display: block; width: 208px; height: 45px; text-indent: -9999em; overflow: hidden; background: url(/page/-/images/vote.png) no-repeat center 0; } #stories.entries #contest .contest-votes .contest-votes-link a:hover { background-position: center -45px; } #stories.entries #contest #contest-votes-signup { clear: both; float: none; font-weight: normal; font-size: 16px; background: #e0f0ee; -moz-border-radius: 5px; padding: 25px; display: block; } #stories.entries #contest form#votes-signup legend { margin: 0 0 10px; color: #2d7b75; font-weight: bold; } #stories.entries #contest form#votes-signup input { padding: 8px 8px 5px; color: #6c6c6c; border: 1px solid #88c8c2; } #stories.entries #contest form#votes-signup input#votes-submit { background: #88c8c2; padding: 7px 7px 4px; color: #fff; } #stories.entries #contest .entry { padding: 25px; clear: both; float: none; } #stories.entries #contest .entry h2 { margin: 0 0 15px; } #search h1 { margin: 0; } /* 06 =FRAMEWORK ---------------------------------------------------------- */ #bsd.full-width #main #content { float: none; width: 948px; padding: 0; background: #fff; } #bsd h2 { color: #2d7b75; text-transform: lowercase; font-weight: 900; font-size: 30px; margin: 0 0 25px; } #bsd h3 { font-size: 18px; } #bsd.shareyourstory #signupheader { float: left; width: 399px; padding: 25px; background: #EFF9F8; -moz-border-radius: 5px; } #bsd.shareyourstory form#signup { width: 424px; padding: 25px; float: right; background: #EFF9F8; } #bsd.shareyourstory form#signup .fieldset { margin: 0 0 5px; } #bsd.shareyourstory form#signup .label, #bsd.shareyourstory form#signup .input { margin: 0 0 10px; } #bsd.shareyourstory form#signup .label label { font-weight: normal; font-size: 14px; letter-spacing: 1px; color: #2D7B75; } #bsd.shareyourstory form#signup .input input, #bsd.shareyourstory form#signup .input textarea { background: #fff; border: 1px solid #88c8c2; padding: 8px 10px; color: #6c6c6c; } #bsd.shareyourstory form#signup .input input#email { width: 404px; } #bsd.shareyourstory form#signup .input input#firstname { width: 140px; } #bsd.shareyourstory form#signup .input input#lastname { width: 230px; } #bsd.shareyourstory form#signup .input input#zip { width: 140px; } #bsd.shareyourstory form#signup .input input#custom-45 { width: 140px; } #bsd.shareyourstory form#signup .input input#custom-46 { width: 230px; } #bsd.shareyourstory form#signup .input textarea { width: 404px; line-height: 16px; height: 200px; margin: 0 0 10px; } #bsd.shareyourstory form#signup .input input#custom-33 { background: #fff; } #bsd.shareyourstory form#signup .input input#custom-48 { width: 404px; height: } #bsd.shareyourstory form#signup .input input.checkbox { margin: 5px 10px 5px 0; } #bsd.shareyourstory form#signup .input label { font-size: 14px; } #bsd.shareyourstory form#signup .input .opt_in_description { height: auto; } #bsd.shareyourstory form#signup .input input.submit { background: #639E99; color: #fff; text-transform: uppercase; font-size: 14px; letter-spacing: 1px; margin: 10px 0 0; } #bsd.shareyourstory #contest { width: 399px; } #bsd.shareyourstory #contest .contest-story { margin: 0 0 0 160px; } #contact_importer_button_container { float: left; } /* 07 =UTILITY ---------------------------------------------------------- */ .stretcher { clear: both; height: 1px; visibility: hidden; } .nomargin { margin-bottom: 0px; } .floatl {float: left; margin: 0; padding: 0 10px 10px 0;} .floatr {float: right; margin: 0; padding: 0 0 10px 10px;} .floatl-nomargin { float: left; margin: 0; padding: 0;} .floatr-nomargin { float: right; margin: 0; padding: 0;} .clear {clear:both; height:0; margin:0; font-size: 1px; line-height: 0;} .required { color: red; } i, em { font-style: italic; } b, strong { font-weight: bold; } sup, sub { height: 0; line-height: 1; vertical-align: baseline; _vertical-align: bottom; position: relative;} sup { bottom: 1ex; } sub { top: .5ex; } .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .clearfix {display:inline-block;} .clearfix {display:block;}