/* ------------------------------------------------------------------------------- NOTE: This is the GLOBAL lander css base. Changes made here will to apply globally to ALL landers for portent. See client-specific css for additional styles. DO NOT REMOVE ANYTHING FROM THIS FILE! ------------------------------------------------------------------------------ */ /* =============================== HOUSE CLEANING ================================ */ .clear { clear:both; height:1px; overflow:hidden; } a img { border:0; } .center { text-align:center; margin:0 auto; display:block; clear:both; } .left { display:block; position:relative; float:left; margin:0 20px 10px 0; } .right { display:block; position:relative; float:right; } a span { cursor:pointer; } /* =============================== LANDER LAYOUTS ================================ */ /* The id determines the overall layout in the top area. Numerous classes can be added, separated by spaces. In the example below, it's giving the wrapper a 30 pixel rounded edge, with default coloring / padding. Syntax: These are designed to work so that layouts can be tested in optimizer without needing structural code changes. */ /* ------------------------------ Style 1 - Hero Left ------------------------------ */ /* ____________________ | | |================= | STANDARD LANDER / | | With hero aligned left |________ ----- | | | ----- | | | ----- | id="standard-hero-left" | | ----- | | | ----- | |________| | | | | -------------- | | -------------- | | -------------- | |__________________|*/ body#standard-hero-left div#hero-image { display:block; float:left; margin:0 25px 25px 0; padding:0; max-width:50%; } body#standard-hero-left #primary-copy { display:block; float:left; padding:0; margin:0; max-width:50%; } /* ----------------------------- Style 2 - Hero Right ------------------------------ */ /* ____________________ | | |================= | | | STANDARD LANDER / | ------ _________| With hero aligned right | ------ | | | ------ | | id="standard-hero-right" | ------ | | | ------ | | | |________| | | | -------------- | | -------------- | | -------------- | |__________________|*/ body#standard-hero-right div#hero-image { display:block; float:right; margin:0 0 3% 3%; padding:0; width:50%; } body#standard-hero-right #primary-copy { width:47%; display:block; float:left; } /* ---------------------------- Style 3 - Hero Banner ------------------------------ */ /* ____________________ | | |================= | |_________________ | || | | FOR LAYOUT-HERO-TOP / ||_______________| | With large hero image full width at top | | | -------------- | id="standard-hero-top" | -------------- | | -------------- | | -------------- | | -------------- | | -------------- | |__________________|*/ body#standard-hero-top div#hero-image { display:block; margin:0 auto; padding:0; } /* =============================== LANDER LAYOUTS ================================ */ /* NOTE: SHARED STYLES FOR ALL LAYOUTS Some styles may be overwritten later on with other rules. By changing a couple classes in the html, you can change the entire page layout. */ body { background:#fff; } #wrapper { width:100%; text-align:left; background:#fff; margin:1%; padding-bottom:20px; } h1 { margin:0 0 20px 0; padding:0; line-height:30px; } div#copyright-tag { margin: 0 auto; text-align:center; } ul { margin:5px 0 15px 15px; padding:0; overflow:hidden; } ul li { background:url(../img/bullet.gif); background-repeat:no-repeat; background-position:3px 2px; margin:0; list-style-type:none; padding:0 0 10px 25px; } /* ============================== OPTIONAL COLUMNS =============================== */ body.two-columns #optional-columns-wrapper div h1:first-child, body.two-columns #optional-columns-wrapper div h2:first-child, body.two-columns #optional-columns-wrapper div h3:first-child, body.three-columns #optional-columns-wrapper div h1:first-child, body.three-columns #optional-columns-wrapper div h2:first-child, body.three-columns #optional-columns-wrapper div h3:first-child { margin-top:0; padding-top:0; } /* ------------------------------------ Three Columns ------------------------------ */ /* .................... OPTIONAL COLUMNS / | | Add class="three-columns" to the body tag. | ---- ---- ---- | It will automatically add them the "extra-copy" div | ---- ---- ---- | | ---- ---- ---- | Be careful - this is best used in small areas with no scrolling. |__________________|*/ #extra-copy div.three-columns { column-count: 3; column-gap: 10px; column-rule: none; border-top:0; border-bottom: 0; padding: 0; } /* -------------------------------------- Two Columns -------------------------------- */ /* .................... OPTIONAL COLUMNS / | | Add class="two-columns" to the body tag. | ------ ------- | It will automatically add them the "extra-copy" div | ------ ------- | | ------ ------- | Be careful - this is best used in small areas with no scrolling. |__________________|*/ /* ================================= FORM STYLES ================================= */ /* style this if needed */ #offer { position:relative; } form { margin:0 0 10px 0; padding:0; clear:both; display:block; } form label { text-align:right; float:left; margin:0 7px 0 0; padding:0; } form input.text, form select { border:1px solid #999; width:45%; margin:0; padding:2px; } form div.clear { height:0; overflow:hidden; clear:left; } form legend { margin-left: 15px; color: #000; font-weight: bold; } form ol { list-style-type:none; padding: 0 10px 10px 0px; } form ol li { margin:0; list-style-type:none; padding-bottom: 10px; display:block; clear:left; } /* ----------------------------------- Half Width ---------------------------------- */ /* half width forms use this layout: [label] | [input] | | [label] | [input] | optional content | to the right of | the form. [label] | [input] | | [label] | [input] | [submit] */ form.half-width fieldset { /* use the border to create separation between form blocks */ border:1px solid #ccc; margin: 1.5em 1.5em 0 0; padding: 0 10px 15px 0; } form.half-width fieldset li { clear: left; width: 100%; } form.half-width { float:left; clear:both; width:50%; margin:0 20px 0 0; padding:0; } form.half-width ol li { margin:0; padding:0 0 15px 0; clear:both; display:block; overflow:visible; position:relative; } form.half-width ol li label, form.half-width ol li input, form.half-width ol li select { width:100%; margin:0 5px 0 0; padding:0; display:block; clear:both; text-align:left; float:none; position:relative; } /* ------------------------------------ Full width ---------------------------------- */ /* Full width forms use this layout: [label] [input] [label] [input] [label] [input] [label] [input] [submit] */ form.full-width { max-width:100%; } form.full-width fieldset { /* use the border to create separation between form blocks */ border:0; float: left; clear: left; width: 100%; margin: 0 0 1.5em 0; padding: 0 0 15px 0; } form label.full-width { float:left; } form.full-width ol li { margin:0; padding:0 0 10px 0; float:left; clear:none; width:48%; } form.full-width ol li label { width:45%; } form.full-width ol li input, form.full-width ol li select { width:49%; } form.full-width ol li select { width:50%; font-size:12px; } /* --------------------------------- Validation Errors ------------------------------ */ form#offer div.error, label.error { color:red; } form#offer label.error { overflow:visible; text-align:right; left:0; clear:left; font-style:italic; font-size:12px; position:relative; position:static; width:100%; height:auto; margin:0; padding:0; float:left; display:table-cell; bottom:0; border-collapse:collapse; overflow:hidden; } form#offer label.valid { display:none; height:0; overflow:hidden; } form#offer input.error, form#offer select.error, form#offer textarea.error { border: 1px solid red; } /* ================================= MISC EXTRAS ================================= */ /* BORDER STYLES */ /* NOTE: neither of these should be used in combination with rounded corners! */ .dotted { border-style:dotted; } .double { border-style:double; }