/* ---------------------------------------------------------- Name It. Change It. CSS Managed by: Blue State Digital 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: #dedcdc; font-family: Helvetica, Arial, sans-serif; } .base h1 { font-size: 30px; color: #d8511b; margin-bottom: 15px; } #home h2, #sidebar h2 { color: #ec591f; font-size: 30px; text-transform: uppercase; margin-bottom: 15px; } .base h2 { font-size: 20px; color: #d8511b; margin-bottom: 10px;} .base h3 { color: #333; font-weight: bold; font-size: 16px; margin: 0px 0 5px; } .base h4 { color: #333; font-size: 14px; margin: 10px 0 5px; } .base p { font-size: 12px; line-height: 1.5em; margin-bottom: 15px; color: #4f4e4e; } a { color: #ec591f; text-decoration: none;} a:hover { text-decoration: none; color: #ebac23; } a:active { position: relative; top: 1px; } /* blockquote { border-left: 1px solid #999; padding-left: 30px; } */ blockquote { padding: 5px; border: 1px gray solid; margin: 6px 16px 15px 25px; background: #EDEDDC; font-size: 16px; float:left;} .base blockquote p {margin-bottom:0;} .base ul, ol { font-size: 12px; line-height: 1.5em; margin: 20px 0; padding-left: 20px;} .base ul li { list-style-type: disc; } .base ol li { list-style-type: decimal; } .base li ol, .base li ul { margin: 10px 0; } hr { border: 1px solid #e5dfdf; width: 80%; margin: 20px auto; } /* 03 =LAYOUT ---------------------------------------------------------- */ #wrap { width: 974px; margin: 0 auto; background: #f4f4f4; border: 10px solid #000; padding: 0;} /* Header */ #nav { border: 2px solid #000; border-left: 0; border-top: 0; border-right: 0; border-bottom: 2px solid #000; padding: 10px 0 10px 20px; background: #f1b22b; } #nav ul { padding: 0; margin: 0; } #nav ul li { display: inline; padding: 0 10px; border-right: 1px solid #cb8e0c; font-size: 15px; text-transform: uppercase; } #nav ul li:last-child { padding-right: 0; border: 0; } #nav ul li a { color: #000; } #nav ul li a:active { color: #d8511b; } #text-block {float: left; display: inline;} #logo { height: 149px; } #text-block .module { border: 0; border-top: 2px solid #000; padding: 30px; min-height: 318px;} #sidebar .module { border: 0; border-bottom: 2px solid #000; border-top: 2px solid #000; padding: 30px;} /* Sidebar */ #sidebar { width: 378px; float: left; border-left: 4px solid #000; display: inline; } #sidebar #action { padding: 30px; border-top: 0;} #action ul { padding: 0; } #action ul li { list-style-type: none; } #action ul li a { width: 300px; font-size: 24px; text-transform: uppercase; text-align: center; text-decoration: none; margin: 2px 0; float: left; vertical-align: text-top;} #action ul li a strong { background: url(http://www.nameitchangeit.org/page/-/images/sidebar/button-strong-rule.png) bottom center no-repeat; display: block; padding-bottom: 5px; font-weight: normal; } #action ul li a em { font-size: 13px; line-height: 80%; } #action ul li#connect { background: #e1a118 url(http://www.nameitchangeit.org/page/-/images/sidebar/button-short.png); padding: 10px; color: #fff; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; float: left; width: 300px; font-size: 24px; text-transform: uppercase; text-align: center; margin-top: 3px; } #action ul li#connect ul li { display: inline; } #action ul li#connect a { background: url(http://www.nameitchangeit.org/page/-/images/sidebar/social-media-buttons.png) no-repeat; width: 36px; height: 35px; text-indent: -9999px; margin: 0 6px; display: block; float: left; } #action ul li#connect a#twitter { background-position: -45px 0; } #action ul li#connect a#youtube { background-position: -90px 0; } #action ul li#connect span { float: left; width: 100px; padding-top: 7px; margin-left: 5px; display: block;} #action ul li#connect .social-icons { width: 155px; float: left; margin: 0; margin-left: 15px; display: inline;} #action #quick-signup p { color: #ec591f; font-size: 15px; text-transform: uppercase; margin: 0; line-height: 20%; font-weight: normal; margin-bottom: 5px; } #action #quick-signup input { font-size: 12px; padding: 4px; color: #827d7e; } #action #quick-signup #quick-email { width: 150px; } #action #quick-signup #quick-zip { width: 83px; } #action #quick-signup .quick-submit { vertical-align: top; padding: 0; } #sidebar #twitter-feed { font-size: 12px; } #sidebar #twitter-feed p a { padding: 5px;; } #sidebar #twitter-feed h2 { color: #fff; } #sidebar .tweets { margin: 20px 0; } #sidebar .tweets a { color: #000; } #sidebar .tweets em { font-style: normal; color: #000; display: block;} #sidebar p a, #sidebar p { text-transform: uppercase; color: #fff; font-weight: bold; text-decoration: none; } #sidebar #rotator.module { height: 284px; width: 378px; margin: 0; top: 0; position: relative;overflow: hidden; padding: 0; } div#rotator-cycle{ height: 284px; width: 378px; position: absolute; left: 0; top: 0; } #sidebar #rotator-nav { position: relative; top: 230px; left: 310px; z-index: 99; } #sidebar #rotator-nav a { background: url(http://www.nameitchangeit.org/page/-/images/sidebar/rotator-buttons.png) no-repeat 0; text-indent: -9999px; width: 20px; height: 40px; display: block; float: left; z-index: 99; position: relative;} #sidebar #rotator-nav a#next { background-position: -28px; } #sidebar #partners { text-align: center; border-bottom: 0;} #sidebar #partners .entry { background: url(http://www.nameitchangeit.org/page/-/images/sidebar/button-strong-rule.png) bottom center no-repeat; padding-bottom: 10px; margin: 10px 0; } #sidebar #partners .entry:last-child { background: none; } #footer { width: 994px; margin: 0 auto; text-align: right; margin-top: 10px; } #footer a { color: #333; } /* 04 =HOMEPAGE ---------------------------------------------------------- */ #about-text h2 { color: #ecab1f; font-weight: bold; } #about-text p { font-size: 15px; } #about-text p.note { margin-top: -20px; font-size: 0.7em; font-style: italic; } #text-block #about-text.module { min-height: 316px; overflow: hidden; } #featured-video.module { padding: 0; height: 385px; background: #000; width: 100%; overflow: hidden; } #featured-video.module object { display: block; margin: 0 auto; } #latest-news.module { border-bottom: 0; } /* 05 =SUBPAGES ---------------------------------------------------------- */ .interior #text-block #content-area { padding: 30px; } .interior #content-area { padding: 30px; } .pyramid #content-area { background: #fff; } #blog .thumb img, #latest-news .thumb img { float: left; margin-right: 20px; border: 3px solid #fff; -webkit-box-shadow: 0px 0px 4px #999999; -moz-box-shadow: 0px 0px 4px #999999; box-shadow: 0px 0px 4px #999999; } #blog .post-summary, #latest-news .post-summary, #blog .post { overflow: hidden; } .pagination { float: right; color: #999; } .pagination a { color: #d8511b; padding: 0 5px; } /* 06 =FRAMEWORK ---------------------------------------------------------- */ .full-width #text-block { width: 100%; } /* SKIN OVERRIDES Last Update: AUGUST 18, 2010 NOTE: These definitions assume that framework elements have been wrapped in a div with the id "framework". For the YUI styles to work the body id should be "bsd" */ /*=TYPOGRAPHY ---------------------------------------------------------- */ #framework #SKIN td, #framework #SKIN blockquote, #framework #SKIN div { font-size: 13px;} #framework #SKIN td, #framework #SKIN blockquote { margin: 10px 0; } #framework #SKIN h1, /*If you change the font-soze for h1 or it's top margin or padding properties be sure to change the top margin property for "#SKIN #account_actions" such that the base line for the elements within line up with h1 in control_set div*/ #framework #SKIN .basic .main #eventdetail .title, /*Event Title*/ #framework #profiledetail #sectionheader, #framework #stdheader #title /*Page title on Outreach pages*/ { font-size: 24px; font-weight: bold; line-height: 30px; margin-bottom: 6px; } #framework #SKIN .label label, #framework #SKIN label.fieldlabel { font-size: 14px; font-weight: normal; display: block; margin: 10px 0 5px; text-transform: capitalize; } #framework #SKIN .input input.text, #framework #SKIN input.text { font-size: 13px; padding: 3px;} #framework #SKIN .radio { font-size: 13px; } /*if using cufon or typekit for headers be sure to target the following header ids/classes #titletext - header for Outeach pages .headertitle — header for Comunity pages */ #framework #contribution .contribheader, /*Section headers on Contribute form*/ #framework #SKIN h2, #framework #sectionheader, #framework #SKIN .widget_header, #framework #SKIN .widget_title, #framework #community .communitypostinlist .title, /*Blog post title on community web page*/ #framework #community .header, /*Community page headers */ #framework #community .communitypostfull .title, /*Community title for full blog post*/ #framework #community .journaltitle, #framework #community .journalarchive .journalarchivetitle, #framework a#host-button, #framework #loginform .logintitle, #framework #signupform .signuptitle, #framework #outreach_content #loginform .logintitle, #framework #outreach_content #signupform .signuptitle, #framework #manageform .managetitle, #framework #forgotpw .header { font-size: 18px; font-weight: bold; line-height: 24px; margin-bottom: 6px; } #framework #SKIN h3, #framework #SKIN .basic .main .typedescheader, #framework #community .postlist table.head .text, /*Table heading on Community Dashboard page*/ #framework #community .subheader, /*Subheader on the Community Blog Entry Preview page*/ #framework #community .profileteaser .title, /* Profile teaser title on Blog home page*/ #framework #odgettingstarted .odsechead, #framework #odprogress .odsechead, #framework #odyourpage .odsechead, #framework #odstats .odsechead, #framework #odaddress .odsechead, #framework #odgroup .odsechead, #framework #outreach_content .omhead { font-size: 14px; font-weight: bold; line-height: 20px; margin-bottom: 6px; } #framework #SKIN h4, #framework #SKIN h5 { font-size: 12px; font-weight: bold; line-height: 18px; } /*HEADERS WITH BOTTOM BORDERS*/ #framework #contribution .contribheader, /*Section headers on Contribute form*/ #framework #sectionheader, #framework .sectionheader, #framework #SKIN .header, #framework #SKIN .basic .main .typedescheader, #framework #community .header /*Community page headers */ #framework #community .communitypostfull .title, /*Community title for full blog post*/ #framework #community .journaltitle, #framework #community .journalarchive .journalarchivetitle, #framework #stdheader, /*Header for Outreach pages*/ #framework #community .profileteaser .title, /* Profile teaser title on Blog home page*/ #framework #odgettingstarted .odsechead, #framework #odprogress .odsechead, #framework #odyourpage .odsechead, #framework #odstats .odsechead, #framework #odaddress .odsechead, #framework #odgroup .odsechead, #framework #outreach_content .omhead, #framework #manageform .managetitle, #framework #forgotpw .header { border-bottom: 1px solid #ddd; padding-bottom: 3px; font-weight: normal; margin: 10px; display: block; padding-top: 20px;} /*WIDGET HEADERS*/ #framework #SKIN .widget_header { background: #eee; border-bottom: 1px solid #ddd; margin-bottom: 6px; padding: 5px 10px; position: relative; } /*SUB-HEADERS*/ #framework #SKIN .widget_subheader, /*Widget Subheader on the dashboard*/ #framework #community .subheader /*Subheader on the Community Blog Entry Preview page*/ { background: #F2F7F7; border-bottom: 1px solid #ddd; padding: 5px 10px; } /*=FORM ELEMENTS ---------------------------------------------------------- */ #framework .checkbox, #framework .radiobutton, #framework.label, #framework .text { margin: 0 .5em 0 0; } /*=BUTTONS ---------------------------------------------------------- */ /*INPUT BUTTONS*/ #framework input[type=button], #framework input[type=submit], #framework .submit, #framework #invitationpage #submit_button, #framework #date-filter, #framework .loginbutton input, #framework .signupbutton input, #framework #community input[type=submit], #framework .utils_search button { cursor: pointer; } /*Targets most Buttons*/ /*INPUT HOVER STATES Note this will only work for modern browsers*/ #framework input[type=button]:hover, #framework input[type=submit]:hover, #framework input:hover.submit, #framework #invitationpage input:hover#submit_button, #framework button:hover#date-filter, #framework .loginbutton input:hover, #framework .signupbutton input:hover, #framework #community input[type=submit]:hover, #framework .utils_search button:hover { } /*RSVP and DETAILS BUTTONS*/ #framework #event_results .event_footer .links { float: left; } #framework #event_results .event_footer .links .detail_button, #framework #event_results .event_footer .links .rsvp_button { float: right; } #framework #event_results .event_footer .links .detail_button a, #framework #event_results .event_footer .links .rsvp_button a { display: block; margin-left: 10px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; padding: 2px 10px; } #framework #event_results .event_footer .links .detail_button a { background: #eee; border: 1px solid #ccc; padding: 2px 10px 1px; } #framework #event_results .event_footer .links .rsvp_button a { background: #555; color: #fff; padding: 3px 10px 2px; } #framework #event_results .event_footer .links .detail_button a:hover, #framework #event_results .event_footer .links .rsvp_button a:hover { background: #333; border-color: #333; color: #eee; } /*Hover state for RSVP and Details buttons*/ /*CONTACT IMPORTER BUTTOM FOR SHARE AND INVITE FORMS*/ #framework #contact_importer_button { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; font-size: 12px; } /*You can change the background color to match your other input button styles*/ /*SEARCH BUTTON*/ #framework .search_form button { } /*=TEXT INPUT FIELDS AND TEXTAREAS ---------------------------------------------------------- */ #framework input.text, #framework textarea { } /*Use this definition to target most of the text input fields*/ /*=TABS NOTE If the background color for your page is not white you will have to update the bottom border color for the active tabs for Framework, Events and Friends i.e. #framework #SKIN #blue_hat .blue_hat_active { background: none; border-bottom: 1px solid #fff; font-weight: bold; } #framework ul#event_order li.active { background: none; border-bottom: 1px solid #fff; font-weight: bold; } #framework #SKIN #friends_tabs ul li.active_tab { background: none; border: 1px solid #ddd; border-bottom: 1px solid #fff; } ---------------------------------------------------------- */ /*FRAMEWORK TABS*/ #framework #SKIN #blue_hat { background: none; border-bottom: 1px solid #ddd; height: 43px; } #framework #SKIN #blue_hat ul { display: inline; float: right; height: auto; margin: 0 5px; padding: 18px 0 0 0; } #framework #SKIN #blue_hat li { background: #eee; border: 1px solid #ddd; border-top-left-radius: 3px; display: inline; float: right; padding: 5px 10px 4px; text-decoration: none; } #framework #SKIN #blue_hat li a { color: #888; text-decoration: none; } #framework #SKIN #blue_hat .blue_hat_active { background: none; border-bottom: 1px solid #fff; font-weight: bold; } #framework #SKIN #blue_hat .blue_hat_active a { color: #555; } #framework #SKIN #blue_hat li a:hover { background: none; color: #555; } /*EVENT TABS*/ #framework ul#event_order { border-bottom: 1px solid #ddd; clear: both; float: left; list-style-type: none; margin: 0 0 10px 0; top: 0; width: 100%; } #framework ul#event_order li { background: #eee; border: 1px solid #ddd; color: #888; display: inline; float: left; margin: 0 0 -1px 5px; padding: 5px 10px 4px; text-decoration: none; } #framework ul#event_order li a { color: #888; } #framework ul#event_order a:hover { color: #555; } #framework ul#event_order li.active { background: none; border-bottom: 1px solid #fff; font-weight: bold; } #framework ul#event_order li.active a { color: #555; } /*WIDGET TABS*/ /*Note that the active tab background color should be the same as the .widget_header background color under the WIDGET HEADERS category above*/ #framework #SKIN .widget_tabs { margin: 0; padding: 0; } #framework #SKIN .widget_tabs li { border-top-left-radius: 3px; float: left; list-style: none; padding: 5px 10px 4px 10px; margin: 0 5px 0 0; list-style-type: none; } #framework #SKIN .widget_tabs li.active_tab { background: #eee; font-weight: bold; } #framework #SKIN .widget_tabs li.inactive_tab { background: #ddd; } /*FRIENDS TABS*/ #framework #SKIN #friends_tabs { border-bottom: 1px solid #ddd; margin: 18px 0 6px 0; } #framework #SKIN #friends_tabs ul { margin: 0; padding: 5px 0 0 0; list-style: none; } #framework #SKIN #friends_tabs li { border-top-left-radius: 3px; border-top-right-radius: 3px; display: inline; float: left; margin: 0 0 -1px 5px; list-style-type: none; padding: 5px 10px 4px; } #framework #SKIN #friends_tabs ul li.active_tab { background: none; border: 1px solid #ddd; border-bottom: 1px solid #fff; } #framework #SKIN #friends_tabs ul li.active_tab a { color: #555; font-weight: bold; } #framework #SKIN #friends_tabs ul li.inactive_tab { background: #eee; border: 1px solid #ddd; } /*=SPEAKOUT TABS*/ #framework #speakout #tabs { margin-top: 18px; } #framework #speakout #nav-tabs { border-bottom: 1px solid #ddd; clear: both; float: left; list-style-type: none; margin: 0 0 18px 0; top: 0; width: 100%; } #framework #speakout #nav-tabs li { background: #eee; border: 1px solid #ddd; color: #888; display: inline; float: left; margin: 0 5px -1px 0; padding: 5px 10px 4px; text-decoration: none; } #framework #speakout #nav-tabs li.tab-on { background: none; border-bottom: 1px solid #fff; color: #555; font-weight: bold; } /*YUI POP OVER This controls the style of the pop over opened after clicking the contact importer button As noted above, in order for this to work the body id should be "bsd" ---------------------------------------------------------- */ #bsd .yui-panel { border: 1px solid #ccc; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } #bsd .yui-panel-container.shadow .underlay { display: none; } #bsd .yui-panel .container-close { right: 10px; } /*This targets the close button in the popover. You can replace the default image with one of your choosing. Image dimensions should be 12px square*/ #bsd .yui-panel .hd { background: #eee; color: #333; border: none; border-bottom: 1px solid #ddd; font-size: 18px; font-weight: bold; line-height: 24px; margin-bottom: 6px; padding: 10px; } #bsd .yui-panel .bd { font-size: 12px; line-height: 18px; padding: 6px; } #bsd #contact_importer_wrapper { margin: 0; } #bsd #contact_importer_wrapper #contact_importer_error { margin: 18px 0 0 0; } #bsd #contact_importer_dialog .button-group button { background: #eee; border: 1px solid #ddd; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; cursor: pointer; padding: 3px 10px; } /*Contact Listings*/ #bsd #contact_importer_wrapper #results_table_header { background: #eee; } #bsd #contact_importer_wrapper #results_table_outer { border: 1px solid #ddd; } /*=LAYOUT ---------------------------------------------------------- */ /*SOCIAL NET WIDGET COLUMNS*/ #framework #SKIN #widget_group_1 { float: left; width: 49%; } /*Left column*/ #framework #SKIN #widget_group_2 { float: right; width: 49%; } /*Right column*/ /*SPEAKOUT*/ #framework #speakout table { clear: left; margin: 0 20px 18px 0; } /*=PLEASE DO NOT DELETE OR MODIFY ANY OF THE STYLES BELOW ---------------------------------------------------------- */ #framework #SKIN #widget_directory_search_groups_by_keyword { float: none !important; } /* 07 =UTILITY ---------------------------------------------------------- */ .button a { background: #e1a118 url(http://www.nameitchangeit.org/page/-/images/sidebar/button-short.png); padding: 15px 10px; color: #fff; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .button-tall a { background: #e1a118 url(http://www.nameitchangeit.org/page/-/images/sidebar/button-tall.png); padding: 14px 10px; color: #fff; float: left; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; max-height: 60px; } .orange a{ background-color: #c03f0b; } .orange { color: #fff; background-color: #c03f0b;} .cufon-loading .cufon { visibility: hidden !important; } .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;} .blog-image { float: left; margin: 0 20px 20px 0; font-style: italic; color: #a2a2a2; }