/* Theme Name: Wildfire Platform Theme URI: http://wildfireplatform.com/ Description: A Wordpress theme for Wildfire Platform Author: Jason Bishop and Robert Dyson */ /************************************************* STYLESHEET ************************************************** 1. Main HTML 2. Title 3. Navigation 4. Header 4.1 Banner 4.1 .1 Screenshot 5. Subheader 5.1 Call to Action 6. Subsubheader 7. Content 7.1 Column 1 7.1.1 Newsletter 7.1.2 Twitter 7.2 Column 2 7.2.1 Blog 8. Footer 9. Utility Classes 9.1 Button 9.2 Clearfix 10. Global Browser Overrides 10.1 Internet Explorer 6 and Below 10.2 Internet Explorer and Below 10.3 Internet Explorer Only 11. Salesforce Form Styles *************************************************/ /************************************************* 1. Main HTML *************************************************/ /* Universal styles. */ body { color: #8b7d6f; font-family: Lucida Sans, Verdana, Helvetica, Arial, sans-serif; text-align: center; font-size: 14px; } a { color: #9c4b57; text-decoration: none; } a:hover { text-decoration: underline; } h1 { font-size: 36px; font-weight: bold; } h3 { color: #635243; font-size: 24px; font-weight: bold; margin-bottom: 10px; } h4 { color: #635243; font-size: 18px; font-weight: bold; margin-bottom: 10px; } sup { font-size: 6px; } img.collateral { border: 1px solid #8b7d6f; padding: 4px; margin: 7px 0 0 0; } #container { text-align: left; margin: 0 auto; width: 900px; } /* This applies clearfix to all main divs. You don't have to tell me ... I already realize this is amazing CSS technique. */ #container:after, #twitter_div:after, #title:after, #navigation:after, #header:after, #subheader:after, #subsubheader:after, #content:after, #footer:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } #container, #twitter_div, #title, #navigation, #header, #subheader, #subsubheader, #content, #footer { display: inline-block; } /* \*/ * html #container, * html #twitter_div, * html #title, * html #navigation, * html #header, * html #subheader, * html #subsubheader, * html #content, * html #footer { height: 1%; } #container, #twitter_div, #title, #navigation, #header, #subheader, #subsubheader, #content, #footer { display: block; } /* */ /* Styles for the home page only. */ #home { background: #ffffff url(images/body-background.png) repeat-x; } /* Styles for interior 1-column pages */ #interior-1 { background: #ffffff url(images/interior-body-background.png) repeat-x; } /* Styles for interior 2-column pages */ #interior-2 { background: #ffffff url(images/interior-body-background.png) repeat-x; } /************************************************* 2. Title *************************************************/ #title { height: 55px; padding: 15px 0 0 0; } #title h2 { font-size: 30px; font-weight: bold; display: block; float: left; height: 30px; padding: 10px 0 0 35px; background: transparent url(images/logo.png) no-repeat 0 0; } #title h2 a { color: #6a0b1d; } #title h2 a:hover { text-decoration: none; } #title h2 a:active { text-decoration: none; } #title div { display: block; float: right; text-align: right; font-size: 10px; color: #adadad; } #title div a { color: #adadad; } /************************************************* 3. Navigation *************************************************/ #navigation { height: 35px; font-size: 12px; } #navigation ul { list-style-type: none; display: block; float: left; } #navigation ul li { display: block; float: left; background: transparent url(images/navigation-background.png) no-repeat bottom left; } #navigation ul li.active { font-weight: bold; } #navigation ul li a { display: block; float: left; padding: 9px 20px 0 19px; margin: 0 0 0 1px; height: 26px; color: #73675C; } #navigation ul li a:hover { background: transparent url(images/navigation-hover-background.png) repeat-x bottom right; } #navigation ul li a.last { background: transparent url(images/navigation-background.png) no-repeat bottom right; } #navigation ul li a.last:hover { background: transparent url(images/navigation-last-hover-background.png) no-repeat bottom right; } #navigation input.input-text { display: block; float: right; width: 200px; border: 1px solid #DBDAD9; padding: 4px 5px; position: relative; left: 16px; top: 6px; z-index: 50; color: #ADADAD; } #navigation input.input-submit { display: block; float: right; width: 16px; height: 16px; border: none; background: transparent url(images/search.png) no-repeat; position: relative; left: -4px; top: 10px; z-index: 100; cursor: pointer; } #navigation input.input-submit:hover { background: transparent url(images/search-hover.png) no-repeat; } /************************************************* 4. Header *************************************************/ #home #header { height: 340px; color: #ffffff; background: transparent url(images/header-background.png) no-repeat 0 0; } #home #header h1 { margin: 58px 0 20px 0; } #home #header #introduction { display: block; float: left; width: 590px; margin: 0 30px 0 0; height: 222px; } #home #header #screenshot { display: block; float: left; width: 280px; margin: 0; height: 222px; } #home #header #screenshot img { position: absolute; margin-top: 34px; } #home #header #banner { height: 77px; display: block; float: left; width: 900px; font-size: 18px; } #home #header #banner #feed { margin: -13px 0 0 0; position: absolute; display: block; width: 900px; text-align: right; font-size: 12px; } #home #header #banner #feed span { display: block; float: right; margin: 0 20px 0 0; color: #564b3f; border: 1px solid #c5b7a2; background: #b1a8a1 url(images/newsletter-button-background.png) repeat-x 0 0; padding: 3px 20px 3px 20px; -moz-border-radius: 12px; -webkit-border-radius: 12px; } #home #header #banner ul { display: block; float: left; width: 465px; margin: 7px 30px 0 0; } #home #header #banner ul li { display: block; float: left; width: 190px; margin: 0 17px 0 0; padding: 0 0 0 25px; background: transparent url(images/bullet.png) no-repeat 0 6px; line-height: 30px; } #home #header #banner ul li a { color: #dddbdd; } #interior-1 #header, #interior-2 #header { height: 71px; margin: 0 0 22px 0; } #interior-1 #header h1, #interior-2 #header h1 { color: #FFFFFF; padding: 20px 0 0 32px; line-height: 1em; } /************************************************* 5. Subheader *************************************************/ #home #subheader { height: 167px; color: #73675c; margin: 0 0 45px 0; } #home #subheader strong { color: #544639; } #home #subheader #call-to-action { display: block; float: left; width: 435px; margin: 0 30px 0 0; } #home #subheader #call-to-action a { background: transparent url(images/call-to-action-background7.png) no-repeat right top; position: absolute; margin: -19px 0 0 0; font-weight: bold; color: #ffffff; font-size: 22px; display: block; float: left; height: 95px; cursor: pointer; text-shadow: 0 -1px 0 #a68257; } #home #subheader #call-to-action a:hover { background: transparent url(images/call-to-action-background7.png) no-repeat right center; } #home #subheader #call-to-action a:active { background: transparent url(images/call-to-action-background7.png) no-repeat right bottom; } #home #subheader #call-to-action a span { background: transparent url(images/call-to-action-background2.png) no-repeat 0 0; padding: 10px 20px 10px 30px; margin: 0 10px 0 0; display: block; float: left; height: 75px; } #home #subheader #call-to-action a:hover span { background: transparent url(images/call-to-action-background2.png) no-repeat 0 -114px; } #home #subheader #call-to-action a:active span { background: transparent url(images/call-to-action-background2.png) no-repeat 0-228px; } #home #subheader #call-to-action ul { display: block; float: left; margin: 60px 0 0 14px; } #home #subheader #call-to-action ul li {} #home #subheader #testimonial { display: block; float: left; padding: 20px 30px 0 30px; width: 375px; height: 167px; position: relative; margin-top: -24px; background: transparent url(images/testimonial-background.png) no-repeat top left; } #home #subheader #testimonial blockquote { font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; margin: 16px 0 0 0; } #home #subheader #testimonial span { display: block; float: right; font-size: 12px; } /************************************************* 6. Subsubheader *************************************************/ #home #subsubheader { padding: 0 0 30px 0; margin: 0 0 30px 0; border-bottom: 1px solid #dbdad9; } #home #subsubheader p { line-height: 19px; } #home #subsubheader strong { color: #73675c; } #home #subsubheader #easy-setup, #home #subsubheader #pay-as-you-grow, #home #subsubheader #always-secure { display: block; float: left; width: 280px; margin-right: 30px; } #home #subsubheader #always-secure { margin-right: 0; } #home #subsubheader #easy-setup img, #home #subsubheader #pay-as-you-grow img, #home #subsubheader #always-secure img { float: left; margin: 0 10px 0 0; } /************************************************* 7. Content *************************************************/ #home #content { margin: 0 0 45px 0; } #home #content { line-height: 19px; } #home #content strong { color: #73675c; } #home #video embed { z-index: 11000; } #home #video .close { z-index: 11001; } #home #content #column-1 { display: block; float: left; width: 280px; margin-right: 30px; font-size: 12px; } #home #content #column-1 #newsletter { margin: 0 0 30px 0; padding: 0 0 30px 0; border-bottom: 1px solid #DBDAD9; } #home #content #column-1 #newsletter p { margin: 0 0 15px 0; } #home #content #column-1 #newsletter input.input-text { color: #b1a8a1; padding: 10px 10px; width: 177px; border: 1px solid #b1a8a1; border-right: none; -moz-border-radius: 8px 0 0 8px; -webkit-border-top-left-radius: 12px; -webkit-border-bottom-left-radius: 12px; } #home #content #column-1 #newsletter input.input-submit { color: #544639; font-weight: bold; padding: 9px 20px; width: 80px; border: 1px solid #b1a8a1; -moz-border-radius: 0 8px 8px 0; -webkit-border-top-right-radius: 8px; -webkit-border-bottom-right-radius: 8px; position: relative; margin: 0 0 0 -3px; background: #b1a8a1 url(images/newsletter-button-background.png) repeat-x 0 0; cursor: pointer; position: relative; left: -1px; } #home #content #column-1 #newsletter .mc-field-group { width: 199px; display: block; float: left; } #home #content #column-1 #newsletter .mc-field-group-submit { width: 81px; display: block; float: left; } #home #content #column-1 #twitter_div { margin: 0; padding: 15px 15px 5px 15px; border: 1px solid #cccccc; border-bottom: none; -moz-border-radius: 8px 8px 0 0; -webkit-border-top-left-radius: 8px; -webkit-border-top-right-radius: 8px; } #home #content #column-1 #twitter ul { list-style-type: none; } #home #content #column-1 #twitter ul li { border-bottom: 1px dotted #DBDAD9; padding: 0 0 8px 0; margin: 0 0 8px 0; } #home #content #column-1 #twitter ul li a { font-weight: bold; font-size: 100% !important; } #home #content #column-1 #twitter ul li span a { font-weight: normal; } #home #content #column-1 #twitter #twitter-link { display: block; float: right; padding: 16px 15px 0; height: 20px; text-align: right; width: 250px; background: transparent url(images/twitter.png) no-repeat top left; } #home #content #column-2 { display: block; float: left; width: 590px; } #home #content #column-2 #blog {} #home #content #column-2 #blog ul { list-style-type: none; } #home #content #column-2 #blog ul li { margin: 0 0 15px 0; padding: 0 0 15px 0; border-bottom: 1px solid #DBDAD9; } #home #content #column-2 #blog ul li h4 { font-weight: bold; } #home #content #column-2 #blog ul li span { font-size: 12px; } #home #content #column-2 #blog ul li blockquote { font-weight: normal; margin: 10px 0 0 0; } #interior-1 #content ol, #interior-2 #content ol { margin: 0 0 0 1em; } #interior-1 #content ul, #interior-2 #content ul { margin: 0 0 10px 28px; } #interior-2 #content #main-content p img.one-column-image { margin: 0 0 32px; } #interior-2 #content #main-content p img.two-column-image { margin: 0 32px 32px 0; } #interior-2 #content #main-content p { margin: 32px 0 0 0; } #interior-2 #content { background: transparent url(images/interior-content-background.gif) repeat-y 0 0; display: block; float: left; width: 917px; position: relative; left: -17px; } #interior-2 #content #menu { display: block; float: left; font-size: 12px; font-weight: bold; width: 236px; margin: 0 32px 32px 0; } #interior-2 #content #menu ul { display: block; float: left; list-style-type: none; display: block; float: left; width: 236px; margin: 32px 0 0 0; } #interior-2 #content #menu ul li { display: block; float: left; width: 236px; } #interior-2 #content #menu ul li.active { background: transparent url(images/interior-menu-background.png) no-repeat 0 4px; } #interior-2 #content #menu ul li.active a { color: #ffffff; padding:15px 0 20px 32px; text-shadow: 0 -1px 0 #765835; } #interior-2 #content #menu ul li a { display: block; float: left; color: #544639; padding: 10px 0 10px 32px; margin: 0 0 0 18px; width: 185px; border-top: 1px solid #ede8e1; border-bottom: 1px solid #c7b8a4; } #interior-2 #content #menu ul li a:hover { text-decoration: none; background: transparent url(images/interior-menu-hover-background.png); } #interior-2 #content #menu ul li.active a:hover { background: none; } #interior-2 #content #main-content { list-style-type: none; display: block; float: left; width: 617px; padding: 0 32px 32px 0; margin: 30px 0 0 0; } #interior-2 #shameful-non-semantic-content-top { display: block; float: left; height: 5px; width: 917px; background: transparent url(images/interior-shameful-non-semantic-content-top-background.png) no-repeat 0 0; position: relative; left: -17px; margin: 0; } #interior-2 #shameful-non-semantic-content-bottom { display: block; float: left; height: 5px; width: 917px; background: transparent url(images/interior-shameful-non-semantic-content-bottom-background.png) no-repeat 0 0; position: relative; left: -17px; margin: 0 0 64px 0; } #interior-2 #content #main-content p { margin: 0 0 10px 0; } #interior-1 #content { display: block; float: left; width: 834px; padding: 32px; border: 1px solid #c5b7a2; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #ffffff; margin: 0 0 64px 0; } #interior-1 #content p { margin: 0 0 10px 0; } #interior-1 #content blockquote { font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; } #interior-1 #content #demo-form label, #interior-1 #content #demo-form input.input-submit, #interior-1 #content #demo-form input.input-text, #interior-1 #content #demo-form textarea { margin: 0 0 10px 0; } #interior-1 #content #demo-form label { display: block; float: left; width: 145px; margin-right: 30px; } #interior-1 #content #demo-form input.input-text, #interior-1 #content #demo-form textarea { display: block; float: left; width: 358px; border: 1px solid #8b7d6f; padding: 5px; } #interior-1 #content #demo-form input.input-submit { display: block; float: left; margin-left: 175px; } #interior-1 #content #login { margin: 0 256px; } #interior-1 #content #login label { display: block; float: left; width: 322px; margin-right: 30px; } #interior-1 #content #login input.input-text, #interior-1 #content #login input.input-password { display: block; float: left; width: 310px; border: 1px solid #8b7d6f; padding: 5px; font-size: 28px; margin-bottom: 10px; } #interior-1 #content #login input.input-submit { } #interior-1 #content #testimonial blockquote { margin: 0 0 10px; } #interior-1 #content #testimonial span { display: block; text-align: right; font-size: 12px; margin: 0 0 20px; padding: 0 0 20px 0; border-bottom: 1px solid #c5b7a2; } #content #menu { display: none; } #content #menu #how, #content #menu #customers { display: none; } #interior-2 #content #menu { display: block; } .how #content #menu #how { display: block; } .customers #content #menu #customers { display: block; } #interior-1 #shameful-non-semantic-content-top { display: none; } #interior-1 #shameful-non-semantic-content-bottom { display: none; } #interior-1 #content #main-content .column-row, #interior-2 #content #main-content .column-row { margin: 0 0 33px; } #interior-1 #content #main-content .lined-column-row, #interior-2 #content #main-content .lined-column-row { margin: 0 0 21px; padding: 0 0 12px; border-bottom: 1px dotted #8b7d6f; } #interior-1 #content #main-content .column-row:after, #interior-2 #content #main-content .column-row:after, #interior-1 #content #main-content .lined-column-row:after, #interior-2 #content #main-content .lined-column-row:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } #interior-1 #content #main-content .column-row, #interior-2 #content #main-content .column-row, #interior-1 #content #main-content .lined-column-row, #interior-2 #content #main-content .lined-column-row { display: inline-block; } /* \*/ * #interior-1 #content #main-content .column-row, #interior-2 #content #main-content .column-row, #interior-1 #content #main-content .lined-column-row, #interior-2 #content #main-content .lined-column-row { height: 1%; } #interior-1 #content #main-content .column-row, #interior-2 #content #main-content .column-row, #interior-1 #content #main-content .lined-column-row, #interior-2 #content #main-content .lined-column-row { display: block; } /* */ #interior-1 #content #main-content .two-column, #interior-1 #content #main-content .two-column-equal, #interior-1 #content #main-content .three-column { display: block; float: left; width: 834px; margin: 0; } #interior-2 #content #main-content .two-column-equal { display: block; float: left; width: 617px; margin: 0; } #interior-2 #content #main-content .two-column-unequal { display: block; float: left; width: 617px; margin: 0; } #interior-2 #content #main-content .two-column-equal .column-1, #interior-2 #content #main-content .two-column-equal .column-2 { display: block; float: left; margin: 0 33px 0 0; } #interior-2 #content #main-content .two-column-equal .column-1 { width: 292px; } #interior-2 #content #main-content .two-column-equal .column-2 { width: 292px; margin: 0; } #interior-2 #content #main-content .two-column-unequal .column-1, #interior-2 #content #main-content .two-column-unequal .column-2 { display: block; float: left; margin: 0 32px 0 0; } #interior-2 #content #main-content .two-column-unequal .column-1 { width: 184px; } #interior-2 #content #main-content .two-column-unequal .column-2 { width: 401px; margin: 0; } #interior-1 #content #main-content .two-column-equal .column-1, #interior-1 #content #main-content .two-column-equal .column-2 { display: block; float: left; margin: 0 34px 0 0; } #interior-1 #content #main-content .two-column-equal .column-1 { width: 400px; } #interior-1 #content #main-content .two-column-equal .column-2 { width: 400px; margin: 0; } #interior-1 #content #main-content .two-column .column-1, #interior-1 #content #main-content .two-column .column-2 { display: block; float: left; margin: 0 33px 0 0; } #interior-1 #content #main-content .two-column .column-1 { width: 545px; } #interior-1 #content #main-content .two-column .column-2 { width: 256px; margin: 0; } #interior-1 #content #main-content .three-column .column-1, #interior-1 #content #main-content .three-column .column-2, #interior-1 #content #main-content .three-column .column-3 { display: block; float: left; width: 256px; margin: 0 33px 0 0; } #interior-1 #content #main-content .three-column .column-1 { } #interior-1 #content #main-content .three-column .column-2 { } #interior-1 #content #main-content .three-column .column-3 { margin: 0; } #interior-1 #content #main-content form#get-started label { display: block; float: left; width: 120px; } #interior-1 #content #main-content form#get-started input { display: block; float: left; width: 200px; } #interior-1 #content #main-content p img { float: left; margin: 0 10px 0 0; } #interior-2 #content #main-content p img { float: left; margin: 0 10px 0 0; } /************************************************* 8. Footer *************************************************/ #footer { padding: 20px 0 20px 0; display: block; background: #e5d7c8 url(images/footer-background.png) repeat-x top left; font-size: 12px; color: #73675c; } #footer-container { text-align: left; margin: 0 auto; width: 900px; } #footer p { font-weight: bold; color: #544639; margin: 0 0 15px 0;} #footer p a { color: #6a0b1d; } #footer ul { display: block; float: left; } #footer ul li { display: block; float: left; width: 168px; margin-right: 15px; } #footer ul li.last { margin-right: 0; } #footer ul li a { display: block; float: left; font-weight: bold; color: #544639; margin: 0 0 8px 0; } #footer ul li ul { display: block; float: left; width: 168px; } #footer ul li ul li { display: block; float: left; width: 168px; margin: 0; } #footer ul li ul li a { font-weight: normal; color: #73675c; margin: 0; } /************************************************* 9. Utility Classes *************************************************/ /* 9.1 Button */ a.button { background: #faad19 url(images/call-to-action-background.png) repeat-x bottom left; color: #ffffff; display: block; float: left; padding: 5px 15px; cursor: pointer; text-shadow: 0 -1px 0 #a68257; -moz-border-radius: 4px; -webkit-border-radius: 4px; } a.button:hover { text-decoration: none; } a.button:active { text-shadow: 0 1px 0 #a68257; } /* 9.2 Clearfix */ .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .clearfix { display: inline-block; } /* \*/ * html .clearfix { height: 1%; } .clearfix { display: block; } /* */ /* 9.3 JUST GHETTO */ /************************************************* 10. Global Browser Overrides *************************************************/ /* 10.1 Internet Explorer 6 and Below */ * html #interior-2 #shameful-non-semantic-content-top { overflow: hidden; } * html #interior-2 #content #menu ul li a { margin-left: 9px; } * html #interior-2 #shameful-non-semantic-content-bottom { position: relative; margin-top: -35px; } * html .demo #content #main-content .two-column .column-1 { width: 542px !important; } * html #home #subheader #call-to-action a, * html #home #subheader #call-to-action a span, * html #interior-2 #content #menu ul li, * html a.button, * html #interior-2 #content #main-content p img, * html #home #header #screenshot img, * html #home #header, * html #home #subheader #testimonial, * html #home #subsubheader #enterprise-secure img, #home #subsubheader #flexible-api img, #home #subsubheader #continual-innovation img, * html #home #subheader #testimonial img, * html #title h2, * html #interior-2 #shameful-non-semantic-content-top, * html #interior-2 #shameful-non-semantic-content-bottom, * html #home #header #banner ul li, * html #home #content #column-1 #twitter #twitter-link { behavior: url(/wp-content/themes/wildfire/js/iepngfix.htc); } * html #home #subheader #call-to-action a div { margin-left: -10px !important; } * html #home #subheader #call-to-action a:hover div { margin-left: -10px !important; } * html #home #subheader #call-to-action a:active div { margin-left: -10px !important; } * html #home #subheader #call-to-action a span div { left: 0px !important; margin-left: 0 !important; } * html #home #subheader #call-to-action a:hover span div { left: 0px !important; margin-left: 0 !important; } * html #home #subheader #call-to-action a:active span div { left: 0px !important; margin-left: 0 !important; } * html #home #subheader #testimonial div { left: 0px !important; } * html #title h2 { background-position: 34px 0; } * html #home #header #banner ul li { background-position: 25px 6px; } * html #home #subheader #call-to-action a { margin-left: -332px; } * html #home #content #column-1 #twitter #twitter-link div { left: 0 !important; } /* 10.2 Internet Explorer 7 and Below */ *:first-child+html #home #subheader #call-to-action a { margin-left: -318px; } *:first-child+html #home #header h1 { margin-top: 48px; line-height: 1em; } * html #home #header h1 { margin-top: 48px; line-height: 1em; } *:first-child+html #home #content #column-1 #newsletter .mc-field-group-submit { position: relative; top: 1px; } * html #home #content #column-1 #newsletter .mc-field-group-submit { position: relative; top: 1px; } *:first-child+html #home #content #column-1 #newsletter .mc-field-group-submit input { border: none; } * html #home #content #column-1 #newsletter .mc-field-group-submit input { border: none; } *:first-child+html #title h2 a { position: relative; top: -10px; } * html #title h2 a { position: relative; top: -10px; } /* 10.3 Internet Explorer 7 Only */ /* 10.4 Safari Only */ @media screen and (-webkit-min-device-pixel-ratio:0) { /* Safari 3.0 and Chrome rules here */ #home #content #column-1 #newsletter input[type=submit] { top: 2px; } #home #content #column-1 #newsletter input[type=submit] { padding: 10px 20px; } } /************************************************* 11. Salesforce Form Styles *************************************************/ form.w2llead { text-align: left; clear: both; } .w2llabel, .w2linput { display: block; width: 120px; float: left; } .w2llabel.error { color: #f00; } .w2llabel { clear: left; margin: 4px 0; } .w2linput.text { width: 200px; height: 18px; margin: 4px 0; } .w2linput.textarea { clear: both; width: 320px; height: 75px; margin: 10px 0; } .w2linput.submit { float: none; margin: 10px 0 0 0; clear: both; width: 150px; } #salesforce { margin: 3px 0 0 0; color: #aaa; } #salesforce a { color: #999; }