/* ---------------------------------------------------------- Autism Speaks CSS Managed by: Blue State Digital Last Update: May 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) ---------------------------------------------------------- */ /* 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 { color: #303030; font: .8em "Helvetica", Helvetica; } .base h1, #bsd #SKIN h1 { color: #022141; text-decoration: none; margin-bottom: 10px; font-style: normal; font-size: 1.9em; } .base h2 { color: #022141; text-transform: uppercase; margin-bottom: 10px; font-size: 1.55em; } .base h3 { color: #124780; font-size: 1.2em; margin-bottom: 10px; } .base h4 { margin-bottom: 10px; font-weight: bold; } .base p { font-size: 1em; margin-bottom: 10px; } a { color: #124780; } a:hover { } blockquote { } .base ul, ol { padding-left: 25px; } .base ul { } .base ol { } .base ul li { list-style-position: outside; list-style-type: disc; margin-bottom: 5px; } .base ol li { list-style-position: outside; list-style-type: decimal; margin-bottom: 5px; } .base li ol { } .base li ul { } /* 03 =LAYOUT ---------------------------------------------------------- */ html { background-image: url(/page/-/liub/img/bg-html.jpg); } body { background: url(/page/-/liub/img/bg.jpg) no-repeat center top; } #wrapper { width: 900px; margin-left: auto; margin-right: auto; } #header { width: 900px; height: 185px; background-color: #; float: left; } #header a.logo { display: block; width: 450px; height: 155px; float: left; margin-top: 20px; } #header .header-right { float: right; width: 290px; padding-top: 59px; padding-right: 5px; } #header #quicksignup { float: right; width: 290px} #header #quicksignup input.text { color: #818181; float: left; padding: 5px; border: 1px solid #888888; width: 115px; margin-right: 5px; display: inline; } #header #quicksignup input.zip { width: 60px} #header .header-donate { float: right; width: 290px; padding-top: 20px; } #header .header-donate h4 { float: left; width: 165px; padding-right: 5px; color: #022141; font-size: .85em; } #header .header-donate a { float: right } #main { width: 900px; background: #fff; float: left; } #content { width: 600px; float: left; } #pages #content { width: 560px; float: left; padding: 20px; } #sidebar { float: left; width: 260px; background-color: #f4f4f4; padding: 20px; } #sidebar a { display: block; } .event-search { background: #dfdfdf url(/page/-/liub/img/bg-find.png) no-repeat; width: 227px; height: 50px; margin-bottom: 15px; padding-top: 35px; padding-left: 15px; padding-right: 15px; } #bsd .event-search input.text, .event-search input.text { color: #818181; float: left; padding: 5px; border: 1px solid #888888; width: 125px; margin-right: 5px } .event-search td.formlink a { font-size: .85em; padding-top: 8px; } .event-search tr#event_radius_row { display: none } #bsd .event-search td { padding: 0; } #bsd .event-search th.form_label { padding: 0 } .event-search select { display: none; } .upcoming-events { margin-bottom: 10px; padding-bottom: 10px; } p.date { margin-bottom: 0 ; } #footer { float: left; width: 860px; height: 75px; background: #fff; border-top: 2px solid #1d5da4; padding: 20px; } #footer .footer-left { float: left; width: 127px; padding-right: 20px; border-right: 1px solid #ccc; } #footer .footer-right { float: left; width: 685px; padding-left: 20px; } #footer .footer-right a img { float: left; padding-right: 10px} #footer .footer-right p{ float: left; width: 630px; color: #222; padding-top: 5px; } .sub-footer { width: 900px; float: left; margin-top: 10px; text-align: center; } .sub-footer p { color: #fff; font-size: .85em; } /* 04 =HOMEPAGE ---------------------------------------------------------- */ .flickr { padding: 20px; background: #e5eef5 url(/page/-/liub/img/bg-flickr.jpg) no-repeat; } .flickr a { margin: 0 auto 0 4px; } .flickr p { width: 396px; float: left; margin-bottom: 0; margin-top: 5px; } .flickr p a { float: none; margin-left: 0; } .flickr a.add-photos { float: right; margin-left: 0; } .welcome-text { padding: 20px; } .welcome-text p { font-size: 1.1em } .other-text { padding: 0 20px 20px; width: 560px; float: left; }.awareness-text { float: left; width: 259px; padding-right: 0; margin-top: 10px; } .awareness-text p { float: left; width: 155px; } /* 05 =SUBPAGES ---------------------------------------------------------- */ #meerkat-wrap { background-color: rgba(9,36,61,0.95); } #meerkat { position: relative; } #meerkat { width: 100%; display: none; } #meerkat { width: 960px; margin: 0 auto; padding-top: 10px; } #meerkat h1 { color: #FFF; font-size: 3.8em; } #meerkat p { color: #FFF; font-size: 1.2em; } #meerkat a.dont-show { color: #FFF; font-weight: bold; } #meerkat a.dont-show:hover { color: #FFF; text-decoration: none; } a.close { position: absolute; top: 7px; right: 3px; background: url(../images/close-btn.png) no-repeat 0 0; display: block; height: 26px; width: 26px; text-indent: -9000px; } a.close-meerkat { position: absolute; top: 5px; right: 3px; background: #FFF; border: 2px solid #FFF; text-decoration: none; padding: 0px 4px 1px 5px; font-weight: bold; font-size: 1.2em; color: #71adb1; } a.close-meerkat:hover { border: 2px solid #2e2a22; color: #2e2a22; } a.meerkat-donate { float: right; padding-right: 60px; padding-bottom: 40px; padding-top: 10px; } .meerkat-right { float: left; width: 725px; } .meerkat-right h2 { color: #fff; font-size: 1.9em; font-weight: bold; margin-bottom: 5px; padding-top: 10px; } .meerkat-right h3 { color: #fff; text-transform: uppercase; margin-bottom: 10px; font-size: 1.55em; } /* 06 =FRAMEWORK ---------------------------------------------------------- */ #bsd #content { padding: 20px; width: 560px; } /*=GENERAL STYLES*/ #bsd #SKIN p, #bsd #SKIN th, #bsd #SKIN td { font-size: 1.25em; } #bsd #SKIN td, #bsd #SKIN th { padding: 5px; } #bsd .checkbox, #bsd .radiobutton, #bsd .text { margin: 0 5px 0 0; } /*Adds spacing to the right of check boxes and radio buttons*/ #bsd label { text-transform: capitalize; } #bsd input.text, #bsd input#venue_zip, #bsd textarea { color: #818181; padding: 3px; border: 1px solid #888888; margin-top: 5px; margin-bottom: 10px; } /*Targets most of the submit buttons used in the framework*/ #bsd td.contribheader { border-bottom: 1px solid; font-weight: bold; } #bsd.full-width #content { padding: 20px; width: 858px; } /*=LOGIN and SIGN-UP FORMS*/ #bsd #loginform, #bsd #signupform { background: #eee; border: 1px solid #ddd; margin: 0 auto; width: 480px; } #bsd #loginform .logintitle, #bsd #signupform .signuptitle { border-bottom: 1px solid #ddd; font-size: 24px; margin: 0 0 5px 0; padding: 15px 10px 10px; text-align: left; }/*text formatting and spacing of log in and sign up box headers*/ #bsd #loginform table, #bsd #signupform table { padding: 10px 0; } #bsd #loginform td, #framework #loginform th, #framework #signupform td, #framework #signupform th { padding: 2px 10px; } #bsd #loginform table .loginbutton, #framework #signupform table .signupbutton { padding: 20px 10px 10px; } /*padding around submit buttons*/ #bsd #contribution input.text{ margin-bottom: 0 } #bsd #contribution td, #bsd #contribution th { padding-top: 5px } #bsd #match { width: 425px; float: right; position: relative; left: 430px; } #bsd input#processbutton { position: relative; left: 42px; } /*USER CONTROL PANEL*/ #bsd #SKIN #control_set { background: none; margin: 0 0 20px 0; } #bsd #SKIN .basic .main { background: #fff; border: 5px solid #d7eaf8; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; padding: 10px; font-size: 1em; } #bsd #SKIN .basic .main .header, #bsd #SKIN .basic .main #sectionheader { border-bottom: 1px solid #eee; color: #333; margin: 0 0 10px 0; padding: 5px 0; } #bsd #SKIN #friends_tabs .active_tab, #bsd #SKIN #friends_tabs .inactive_tab { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; padding: 2px 6px; 4px } #bsd #SKIN #friends_tabs .inactive_tab { background: #ccc; } #bsd .module_constituent { margin: 0 0 30px 0; }/*Bottom margin on Constituent header*/ /*=FIND AN EVENT*/ #bsd #filters { float: left; margin-right: 20px; width: 240px; } #bsd #calendar { border: 1px solid #ddd; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; margin-bottom: 10px; width: 195px; }/*styles the calendar container on the Event search page*/ #bsd #calendar .calweekdayrow { font-weight: bold; } #bsd .calheader { border-bottom: 1px solid #ddd; padding: 5px 0; } #bsd #date-filter { background: #166eae; color: #fff; border: none; cursor: pointer; padding: 4px 6px; text-transform: capitalize; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }/*Controls the styling of "Go" button on the event search page.*/ #bsd #SKIN #account_actions a:link, #bsd #SKIN #account_actions a:active, #bsd #SKIN #account_actions a:visited, #bsd #SKIN #account_actions a:hover { font-weight: normal; font-style: normal; color: #124780; } #bsd #calendar-nav { width: 211px; float: left; } #bsd #filters{ width: 211px; float: left; margin-right: 0; padding-right: 14px; } #bsd #header #quicksignup input.text { color: #818181; float: left; padding: 5px; border: 1px solid #888888; width: 115px; margin-right: 5px; display: inline; margin-top: 0; margin-bottom: 0; } #bsd #header #quicksignup input.zip { width: 60px} ul#event_order { padding: 0 0 0 12px; } #event_list { float: left; width: 268px; } #bsd #SKIN #eventsearch { padding: 0; width: 548px; } /* 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;}