/* ---------------------------------------------------------- **Jewish Community Heroes** CSS Managed by: Blue State Digital Last Update: July 2009 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) #006599 #3399cc #fbf2e8 #d7780c ---------------------------------------------------------- */ /* 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 ---------------------------------------------------------- */ body { font: .95em Arial, "Helvetica Neue", Helvetica, Geneva, sans-serif; } h1 { color: #006599; margin-bottom: 10px; font: bold 1.85em "Arial", Helvetica Neue, Helvetica, Geneva, sans-serif; } h2 { color: #006599; margin-bottom: 10px; font: bold 1.5em "Arial", Helvetica Neue, Helvetica, Geneva, sans-serif; text-transform: uppercase; } h3 { color: #3399cc; margin-bottom: 5px; font: bold 1.1em "Arial", Helvetica Neue, Helvetica, Geneva, sans-serif; } .base h4 { } p { margin-bottom: 10px; line-height: 1.4em; } a { color: #006599; text-decoration: none; } a:hover { text-decoration: underline; } blockquote { padding-left: 25px; } ul, ol { padding-left: 35px; margin-bottom: 15px; } .base ul { } .base ol { } ul li, ol li { list-style-position: outside; list-style-type: disc; margin-bottom: 10px; } .base li ol { } .base li ul { } ul#diggie li { list-style: none; } /* 03 =LAYOUT ---------------------------------------------------------- */ html {background: #d7780c url(/page/-/splash/bg.jpg) repeat-x; min-height: 1044px; } #wrapper { width: 965px; margin: 0 auto; background: #fff } #content{float: left; background: #ffffff; width: 965px; } #main { float: left; padding: 20px 15px 20px 20px; width: 612px; } /** 03.1 =HEADER ---------------------------------------------------------- **/ #header { float: left; background: #fff; height: 80px; padding: 20px; width: 925px; } a.heroes-logo h1 { background: url(/page/-/img/logo_heroes.jpg) no-repeat; display: block; width: 235px; border-right: #999999 1px solid; height: 71px; text-indent: -9999px; float: left; margin-bottom: 0; } a.ujc-logo h1 { background: url(/page/-/img/logo_ujc.jpg) no-repeat; display: block; width: 263px; height: 71px; text-indent: -9999px; float: left; margin-bottom: 0; margin-left: 5px; } form#stayInformed { float: right; width: 388px; margin-top: 17px; height: 62px; } form#stayInformed p { font-size: .89em; margin-bottom: 5px; } form#stayInformed input { background: #dddddd; padding: 7px; font-size: 1em; border: 1px solid #9f9f9f; } form#stayInformed input#email { float: left; margin-right: 5px; margin-top: 2px; width: 136px; } form#stayInformed input#zip { float: left; width: 80px; margin-right: 5px; margin-top: 2px; } form#stayInformed input.submit { border: none; padding: 0; float: left; text-indent: -9999px; background: url(/page/-/splash/btn_signup.jpg) no-repeat; width: 130px; height: 40px; } /** 03.2 =NAV ---------------------------------------------------------- **/ #site-nav { height: 40px; width: 965px; background: #006699; float: left; margin-bottom: 0; } #site-nav ul{ position: relative; padding: 0; } #site-nav ul li{ float: left; list-style: none; margin: 0;} #site-nav ul li a{ color: #fff; height: 30px; display: block; text-decoration: none; text-transform: uppercase; float: left; overflow: hidden; padding-right: 45px; padding-left: 45px; padding-top: 10px; border-right: 1px solid #fff } #site-nav ul li a:hover { text-decoration: underline; } #site-nav ul li.about a { border: none; } /** 03.2 =SIDEBAR ---------------------------------------------------------- **/ #sidebar { background: #fbf2e8;float: right; width: 285px; height: 656px; margin-right: 15px; margin-top: 20px; padding: 5px 7px 5px 6px; } #sidebar a.sidebar { background: url(/page/-/img/sidebar_btn_bg.jpg) no-repeat; display: block; width: 284px; height: 37px; text-align: center; text-transform: uppercase; color: #fff; font-size: 1.4em; padding-top: 14px; margin-bottom: 5px; text-decoration: none; } #sidebar a.sidebar:hover { color: #d1730c; } #sidebar .widget { width: 267px; margin-left: auto; margin-right: auto; padding-right: 11px; float: left;} #sidebar .social-networks { background: url(/page/-/img/social_networks.png) no-repeat; float: left; width: 285px; height: 60px; margin-bottom: 10px; } #sidebar a.social-network { display: block; overflow: hidden; float: left; text-indent: -99999px; width: 131px; height: 44px; margin-top: 7px; margin-left: 4px; margin-right: 3px; } #sidebar a.find-nominees { background: url(/page/-/img/nominees.png) no-repeat; overflow: hidden; float: left; width: 285px; height: 52px; margin-bottom: 10px; text-indent: -9999px; } /** 03.3 =FOOTER ---------------------------------------------------------- **/ #footer { float: left; width: 905px; background: #fff; height: 31px; border-top: solid #d1730c 1px; padding: 30px; } #footer p { font-size: .85em; float: right; padding-top: 11px; } #footer p a{ font-weight: normal; font-style: normal; } h1.footerLogo { background: url(/page/-/splash/ujc_logo.png) no-repeat; display: block; width: 195px;margin-bottom: 0px; height: 40px; text-indent: -9999px; float: left; } #footer a.heroes-logo img { float: left; } #footer-nav { width: 715px; background: ; float: right; margin-bottom: 0; padding-top: 15px; } #footer-nav ul{ position: relative; padding: 0; } #footer-nav ul li{ float: left; list-style: none; margin: 0;} #footer-nav ul li a{ color: #006699; ; display: block; text-decoration: none; text-transform: uppercase; float: left; overflow: hidden; padding-right: 5px; padding-left: 5px; font-size: 12px; } #footer-nav ul li a:hover { text-decoration: underline; } /* 04 =HOMEPAGE ---------------------------------------------------------- */ #feature { float: left; background: url(/page/-/img/feature_bg.jpg); height: 279px; width: 643px; padding: 10px 161px; richness} #feature .action { margin-top: 10px; height: 50px; } #feature .action a { background: url(/page/-/img/sidebar_btn_bg.jpg) no-repeat; display: block; width: 284px; height: 37px; text-align: center; text-transform: uppercase; color: #fff; font-size: 1.4em; padding-top: 14px; margin-bottom: 5px; text-decoration: none; float: left; } #feature .action a.one { display: inline; margin-right: 40px; margin-left: 15px; } #feature span.celebrate { font-weight: bold; font-size: 20px; display: block; margin-top: 5px; float: left; height: 25px; width: 624px; } #feature-new h1.hero-main {background: url(/page/-/img/refresh/h1-hero.png) no-repeat; display: block; width: 430px; height: 70px; text-indent: -9999px; float: left; margin-bottom: 20px; margin-top: 20px; } #feature .action img { margin-right: 12px; } #carousel { float: left; background: #edc18d; height: 230px; width: 965px; padding-top: 15px; overflow: hidden; } #carousel .entry { width: 190px; float: left; text-align: center; height: 175px; } #carousel img { width: 114px; margin-right: auto; } #carousel .carousel-image { height: 114px; overflow: hidden; width: 114px; margin-left: 25px; } #carousel ul li { display: inline-block; zoom: 1; text-align: center; width: 175px; } #heroes-innder-cont { width: 936px; } #carousel .next { background: url(/page/-/img/btn_next.jpg) no-repeat -21px; top: 498px; left: 1157px; display: block; height: 134px; width: 32px; text-indent: -900em; position: absolute; } #carousel .prev {position: absolute; background: url(/page/-/img/btn_prev.jpg) no-repeat; top: 505px; display: block; height: 120px; width: 38px; text-indent: -900em; left: 230px; } #carousel h4 { font-size: .8em; font-weight: bold; } #carousel p { font-size: .8em; margin-bottom: 5px; } #carousel h2 { text-align: center; margin-bottom: 15px; } #feature-new { float: left; background: url(/page/-/img/feature_bg.jpg); height: 295px; width: 925px; padding: 10px 20px; margin-bottom: 10px; } #feature-new .text { float: left; width: 420px; padding-right: 10px; } #feature-new .video { float: right; } #feature-new .video img { margin-right: 140px; float: right; display: inline; } h2.semi-finals { float: left; width: 100%; text-align: center; } ul#home-nominees li{ display: inline; float: left; list-style: none; width: 150px; height: 181px; padding: 10px; background-color: #cce0eb; margin-right: 10px; margin-bottom: 10px; text-align: center; font-size: .8em; } .nominee-image { width: 150px; height: 150px; overflow: hidden; margin-bottom: 5px; } .nominee-text { float: left; width: 100%; margin-bottom: 20px; text-align: center; } .nominee-text span { color: #fbf2e8; margin-bottom: 10px; font: bold 3em "Arial", Helvetica; } .nominee-text h3 a { text-decoration: underline; color: #fbf2e8; } .nominee-text h3 a:hover { text-decoration: none; } .nominee-text h3 { color: #fbf2e8; margin-top: 5px; } /* 06 =SUB PAGES ---------------------------------------------------------- */ #nominee-list .list-image { float: left; height: 75px; width: 75px; overflow: hidden; display: inline; margin-right: 10px;} #nominee-list img { width: 75px; } #nominee-list .entry { float: left; width: 290px; display: inline-block; padding: 5px; border: 1px solid #dddddd; margin-bottom: 5px; margin-right: 5px; min-height: 192px; } #nominee-list .entry .text { } #nominee-list #main { width: 622px; padding-right: 5px; } #nominee-list .entry h3 { font-size: .8em; color: #000000; margin-bottom: 5px; } #nominee-list .entry h4 { font-size: .8em; color: #000000; margin-bottom: 10px; } #nominee-list .list-top { background: #fbf2e8; padding: 10px; width: 602px; margin-bottom: 20px; height: 62px; } #nominee-list .list-top form.cat-menu { float: left;} #nominee-list .list-top form { float: right;} #nominee-list .list-top input#keywords { float: left; width: 172px; margin-right: 10px; font-size: .8em; padding: 2px; background: #dddddd; border: 1px #fff solid;} #nominee-list .list-top label { float: left; } #nominee-list #diggie li a { color: #006599; font-size: .85em; } #nominee-list .entry p{ font-size: .8em } #profile .stico_default{background:url(/page/-/img/viral-button.gif) no-repeat scroll 0 0!important; padding-top: 0; padding-bottom: 0; padding-left: 18px; text-decoration: none; } #nominee-list .no-results { text-align: center; } #nominee-list .no-results a.aboutNominate { margin: 0 } #nominee-list .no-results a.aboutNominate img { width: 241px; } #profile .stats a.sidebar { background: url(/page/-/img/sidebar_btn_bg.jpg) no-repeat; display: block; width: 284px; height: 40px; text-align: center; text-transform: uppercase; color: #fff; font-size: 1.7em; padding-top: 11px; margin-bottom: 5px; text-decoration: none;} #nominee-leaders .board { background:url(/page/-/img/leaderboard.jpg) no-repeat; width: 600px; height: 355px; padding-top: 71px; padding-left: 0; } #nominee-leaders .leader { float: left; display: inline-block; width: 217px; margin-left: 70px; height: 22px; margin-bottom: 11px; margin-right: 0; font-size: .9em; } #main ul.diggie { padding: 0 } #main ul.diggie li{ list-style: none; } #main ul.diggie li { float: left; } #main ul.diggie h2 { margin-bottom: 15px; } #main ul.diggie h3 { margin-bottom: 15px; } #main form#stayInformed { float: left; } a.aboutNominate { display: inline-block; margin-left: 150px; margin-top: 15px; } #main .nominee-info { float: left; margin-bottom: 25px; background-color: #fbf2e8; width: 590px; padding: 10px;} #main .stats ul { padding: 0; } #main .stats ul li { list-style: none; text-align: center; } #main .stats {float: right; padding: 10px; margin-left: 10px; margin-bottom: 10px; border: 1px solid #dddddd; width: 285px; } #main .stats img.profile-photo { width: 284px; } #main .stats a.vote-now {background: url(/page/-/img/btn_vote.jpg) no-repeat -1px 0; display: block; width: 284px; height: 140px; text-decoration: none; text-indent: -99999px; margin-left: 0; margin-top: 5px; margin-bottom: 5px; overflow: hidden; } #profile #main { width: 930px; } #main .stats h3.votes { background-color: #fbf2e8; display: block; border: 4px solid #dddddd; width: 266px; padding: 4px; margin-bottom: 10px; } #vote #main { margin: 0 0 0 166px; display: inline; width: 615px; } #vote #main form#stayInformed { float: left; width: 614px; height: 71px; } #vote #main form#stayInformed input { float: left; } #vote #main form#stayInformed input.submit { margin-top: 14px; } #vote #main .email { float: left; width: 154px;height: 52px; margin-right: 5px; } #vote #main .zip { float: left; width: 145px; } #local #carousel h2 { text-align: center; margin-bottom: 5px; } #local .jcarousel-skin-tango .jcarousel-clip-horizontal { width: 564px; height: 157px; } #local .jcarousel-skin-tango .jcarousel-container-horizontal { width: 548px; padding: 0 40px 20px 25px; } #local #carousel { float: left; background: #edc18d; height: 223px; width: 615px; padding-top: 5px; margin-bottom: 10px; overflow: hidden; } #local #carousel h2 { text-align: center; margin-bottom: 5px; } #local #carousel.nation-local .jcarousel-skin-tango .jcarousel-clip-horizontal { width: 564px; height: 140px; } #local .jcarousel-skin-tango .jcarousel-container-horizontal { width: 548px; padding: 0 40px 20px 25px;} #local .jcarousel-skin-tango .jcarousel-clip-horizontal { width: 549px; height: 163px; margin-left: 9px; } #local #feature h1.hero-local {background: url(/page/-/img/h1_hero_local.png) no-repeat; display: block; width: 496px; height: 150px; text-indent: -9999px; float: left; margin-bottom: auto; margin-top: 30px; margin-left: 10px; } #local #feature { padding: 25px; width: 915px; height: 262px; margin: 0;} #local #feature .inner { background: #fff; width: 915px; height: 210px; } #local #feature .info { float: right; width: 395px; margin-right: 10px; padding-top: 25px; } #local img.federation-logo { float: left; margin-bottom: 0; padding-left: 5px; margin-top: 2px; height: 70px; } #local #carousel.local .jcarousel-skin-tango .jcarousel-container-horizontal { width: 548px; padding: 20px 40px 20px 25px; height: 150px; } #local #carousel.local h4 { margin-bottom: 10px; } #pages .entry { margin-bottom: 35px; } #news .entry-info { float: left; margin-bottom: 25px; background-color: #fbf2e8; width: 590px; padding: 10px; } #news .entry-info p { margin-bottom: 0; } #news .entry-info span#sharethis_0 { margin-top: 8px; float: left } #news p.news-info { margin-bottom: 0; color: #666666; } #news h3 {margin-top: 25px } #main .nominee-info { float: left; margin-bottom: 25px; background-color: #fbf2e8; width: 590px; padding: 10px;} #main .stats ul { padding: 0; } #main .stats ul li { list-style: none; text-align: center; } #main .author {float: left; padding: 10px; margin-bottom: 10px; text-align: center; border: 1px solid #dddddd; width: 150px; margin-right: 10px; } #main .author img{ width: 150px; } span#sharethis_0 { float: left; width: 610px; margin-bottom: 5px; } #dsq-content { margin-top: 25px; } /* 06 =FRAMEWORK ---------------------------------------------------------- */ #contact_importer_button { float: left; } #left-col-taf {float:left;width:340px;} #left-col-taf h3 {font-weight:bold;margin:18px 0;} #left-col-taf p {margin:10px 0;line-height:20px;} #right-col-taf {float: right; width: 540px; margin-right: 5px;} /* 07 =CAROUSEL ---------------------------------------------------------- */ .jcarousel-container { position: relative; } .jcarousel-clip { z-index: 2; padding: 0; margin: 0; overflow: hidden; position: relative; } .jcarousel-list { z-index: 1; overflow: hidden; position: relative; top: 0; left: 0; margin: 0; padding: 0;} .jcarousel-list li, .jcarousel-item { float: left; list-style: none; width: 190px; height: 190px; } .jcarousel-next { z-index: 3; display: none; } .jcarousel-prev { z-index: 3; display: none; } .jcarousel-next-horizontal { background: url(/page/-/img/btn_next.jpg) no-repeat -21px; } .jcarousel-skin-tango .jcarousel-container-horizontal { width: 897px; padding: 0 40px 20px 25px; } .jcarousel-skin-tango .jcarousel-clip-horizontal { width: 884px; height: 163px; } .jcarousel-skin-tango .jcarousel-item { width: 175px; height: 175px; } .jcarousel-skin-tango .jcarousel-next-horizontal { position: absolute; top: 43px; right: 5px; width: 34px; height: 116px; cursor: pointer; background: transparent url(/page/-/img/btn_next.jpg) no-repeat -12px 0;} .jcarousel-skin-tango .jcarousel-next-disabled-horizontal, .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover, .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active { cursor: default; background-position: -96px 0; } .jcarousel-skin-tango .jcarousel-prev-horizontal { position: absolute; top: 43px; left: 5px; width: 29px; height: 145px; cursor: pointer; background: transparent url(/page/-/img/btn_prev.jpg) no-repeat 0 0; } .full-width #content { padding: 20px; width: 923px; } #left-info { float: left; width: 320px; padding-right: 40px } #taf-form { float: left; width: 400px } /* 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;}