@bwidth: 950px; @bpadding: 30px; @subwidth: @bwidth - ( @bpadding * 2 ); #brochure-template{ section.body{ .block{ .header-content{ background-position: center bottom; background-repeat: no-repeat; width: @bwidth; > header{ font-family: "franklin-gothic-urw-cond"; font-weight: bold; width: @bwidth; h1{ color: #003663; font-size: 35px; margin-top: 10px; padding: 19px @bpadding; text-align: left; text-transform: uppercase; width: @bwidth - ( @bpadding * 2 ); } h2{ color: #777777; float: left; font-size: 18px; line-height: 24px; padding-left: @bpadding; padding-bottom: 20px; text-align: left; text-transform: uppercase; width: ( @bwidth - ( @bpadding * 3 ) ) / 2; } } .content{ color: #646464; float: left; font-family: "pragmatica-web"; font-size: 14px; font-weight: 400; line-height: 21px; padding-left: @bpadding; padding-bottom: 180px; width: ( @bwidth - ( @bpadding * 3 ) ) / 2; button { font-family: "franklin-gothic-urw-cond"; font-size: 18px; margin-left: 50px; margin-top: 45px; padding: 02px 25px 025px; text-shadow: 02px 02px 01px #003C66; } } } .copy-block { @copyBlockPadding: 30px; width: @bwidth - ( @copyBlockPadding * 2 ); padding: @copyBlockPadding; font-family: "pragmatica-web"; header { h1 { color: #333333; font-family: "franklin-gothic-urw-cond"; font-size: 36px; margin-bottom: 20px; width: 890px; } } .quote { background: none repeat scroll 0 0 #CCCCCC; color: #333333; float: right; font-size: 19px; font-weight: 400; line-height: 38px; margin-left: 20px; padding: 20px; text-align: center; width: 400px; } > p { color: #646464; font-size: 14px; font-weight: 400; line-height: 21px; } } .right-side-image { background: #ccc; padding: 0 30px; width: 890px; .wrapper { padding-right: 08px; width: 522px; float: left; header { h1 { margin: 35px 0 05px; font-family: "franklin-gothic-urw-cond"; font-size: 21px; line-height: 42px; font-weight: 700; } } p { // background: transparent !important; margin-bottom: 25px; font-family: "pragmatica-web"; font-size: 14px; line-height: 21px; font-weight: 400; } } .image{ float: left; overflow: hidden; width: 360px; } } .generic-content{ padding:35px; h1, h2, h3, h4, h5, h6{ color: #003663; font-family: "franklin-gothic-urw-cond"; text-transform: uppercase; } h1{ font-size: 40px; margin-bottom: 20px; } h2{ font-size: 27px; margin-bottom: 15px; } h3{ font-size: 25px; margin-bottom: 10px; } h4{ font-size: 23px; margin-bottom: 05px; } h5{ font-size: 20px; } h6{ font-size: 15px; } p{ color: #646464; font-family: "pragmatica-web"; font-size: 14px; line-height: 21px; margin-bottom: 20px; } ul{ li{ line-height: 40px; color: #646464; } } ul.error, ul.errors{ // background-image: url(/assets/styles/shared/warning-icon.png); // background-position: left center; // background-repeat: no-repeat; // margin-bottom: 20px; // min-height: 40px; padding-left: 45px; padding-top: 20px; li{ font-family: "pragmatica-web"; color: #DD3333; line-height: 20px; // color: #A74552; // list-style-type: none; } } } .accordian-list { width: @bwidth; margin: 30px; header { width: @subwidth; h1 { color: #464646; font-family: "franklin-gothic-urw-cond"; font-size: 36px; margin-bottom: 10px; } } .list-item { border-top: solid 01px #aaa; padding: 20px 0; width: @subwidth; .accordian { section.image { float: left; margin-right: 10px; > img { width: 195px; height: 152px; } } .text { color: #333333; font-family: "pragmatica-web"; font-size: 14px; height: 120px; line-height: 20px; padding: 0 10px; width: 870px; p { margin-bottom: 10px; } h1, h2, h3, h4, h5, h6 { color: #878787; font-family: "franklin-gothic-urw-cond"; font-size: 14px; line-height: 18px; margin-bottom: 10px; text-transform: uppercase; } } .accordianButton { background: none repeat scroll 0 0 #00AEEF; border: medium none; border-radius: 0 0 0 0; color: #000033; font-size: 11px; height: 20px; padding: 0 05px; } .accordianContent { padding-top: 20px; display: none; clear: left; color: #333333; font-family: "pragmatica-web"; font-size: 14px; line-height: 20px; } } } } .image-list{ header { h1 { color: #464646; font-family: "franklin-gothic-urw-cond"; font-size: 36px; margin: 35px 35px 05px; text-align: center; } h2 { margin: 0; font-family: "franklin-gothic-urw-cond"; font-size: 17px; color:#888; text-align: center; margin: 0 35px 35px; } } .list{ @imgListPadding: 30px; padding: 0 @imgListPadding; width: @bwidth - (@imgListPadding * 2); .block-wrapper { tbody { .wrapper { .image { margin: 05px 0; vertical-align: middle; img { width: 200px; height: 140px; } } .content { color: #646464; font-family: "pragmatica-web"; font-size: 18px; font-weight: 400; line-height: 19px; padding: 0 30px; vertical-align: middle; width: 626px; } } } } } footer { section { color: #646464; font-size: 18px; font-weight: 700; margin: 0 30px; padding-bottom: 30px; text-align: center; } } .button-edit { margin-left: 30px; } } article.three-column { background: #fff; padding: 0 21px; width: 908px; > header { margin: 0 10px 10px; width: 100%; height: 100px; text-align: center; float: left; h1 { color: #464646; font-family: "franklin-gothic-urw-cond"; font-size: 36px; margin-bottom: 05px; margin-top: 30px; text-transform: uppercase; } h2 { color: #646464; font-family: "pragmatica-web"; font-size: 18px; font-weight: 400; } } section.column { font-family: "pragmatica-web"; background: #e8e9ea no-repeat left bottom; box-shadow: 0 0 20px #888 inset; margin: 0 15px 20px; width: 272px; height: 436px; position: relative; float: left; section.content { padding: 10px; line-height: 17px; h1 { margin-bottom: 05px; font-size: 13px; line-height: 18px; color: #000000; text-transform: uppercase; } h2, h3, h4, h5, h6 { margin-bottom: 05px; font-size: 18px; line-height: 27px; color: #646464; } p { margin-bottom: 05px; font-size: 14px; line-height: 21px; color: #646464; } } } } .two-column-tabbed { padding: 30px; header { h1 { color: #464646; font-family: "franklin-gothic-urw-cond"; font-size: 21px; margin-bottom: 16px; } } .wrapper { background: #E8E9EB; width: 100%; .column { float: left; } .tab-buttons { background: #fff; cursor: pointer; color: #666; width: 441px; padding-right: 08px; .tab { background-image: url(/assets/styles/brochure/tab-arrow.png); background-repeat: no-repeat; border-bottom: 01px solid #CCCCCC; color: #646464; font-family: "pragmatica-web"; font-size: 14px; line-height: 18px; padding: 17px 12px 17px 15px; &:first-child { border-top: 01px solid #CCC; } &:hover, &.selected { color: #000; } } } .tabs { padding: 21px; width: 399px; .tab { display: none; font-family: "pragmatica-web"; font-size: 14px; line-height: 18px; } } } } .link-gallery { background-color: #B7B7B7; padding: 0; width: @bwidth; header { h1 { color: #FFFFFF; font-family: "franklin-gothic-urw-cond"; font-size: 25px; margin: 25px 25px 13px; } } .content { margin: 12px 0; .image { float: left; margin: 0 146px; a{ display: block; width: 129px; height: 129px; overflow: hidden; box-shadow: 2px 2px 1px #888888; } } .edit-mode { height: 200px; img { max-height: 129px; max-width: 129px; } } } } .accordian-long { margin: 20px 0; > header { padding: 0 @bpadding; width: @subwidth; h1 { color: #464646; float: left; font-family: "franklin-gothic-urw-cond"; font-size: 36px; padding: 10px 10px 10px 0; width: 435px; } aside { padding: 10px 0 10px 10px; width: (@subwidth / 2) - 10px; line-height: 20px; float: left; } } .wrapper { width: @subwidth; padding: 0 @bpadding; .accordian { @wpadding: 16px; .accordianButton { background-image: url(/assets/styles/brochure/accordian-plus.png); background-repeat: no-repeat; border-top: 01px solid #CCC; box-shadow: 0 01px 02px; padding: 06px @wpadding 05px; width: @subwidth - (@wpadding * 2); cursor: pointer; & h2 { color: #333333; font-family: "franklin-gothic-urw-cond"; font-size: 18px; } &.selected { background-image: url(/assets/styles/brochure/accordian-minus.png); } } .accordianContent { padding: 06px @wpadding; width: @subwidth - (@wpadding * 2) - 04px; border-left: 02px solid #CCC; border-right: 02px solid #CCC; border-bottom: 02px solid #CCC; display: none; color: #646464; font-family: "pragmatica-web"; font-size: 16px; line-height: 24px; } } } } .contact-snippet { padding: 30px @bpadding; width: @subwidth; header { h1 { color: #464646; font-family: "franklin-gothic-urw-cond"; font-size: 36px; margin-bottom: 30px; width: 890px; } } .copy { color: #646464; float: left; font-family: "pragmatica-web"; font-size: 14px; font-weight: 400; line-height: 21px; padding-right: 10px; width: 435px; } .form-wrapper { padding-right: 10px; width: (@subwidth / 2) - 10px; float: left; } } .squeeze-snippet { background: linear-gradient( #FFD336, #FFFFFF ) #FFD336; padding: 30px @bpadding; width: @subwidth; @epadding: 40px; header { h1 { color: #003663; font-family: "franklin-gothic-urw-cond"; font-size: 36px; margin: auto; padding: 0 @epadding; text-align: center; text-transform: uppercase; width: @subwidth - (@epadding * 2); } } .call-to-action { color: #033566; font-family: "pragmatica-web"; font-size: 18px; font-weight: 400; line-height: 21px; margin: 0 auto 30px; padding: 0 @epadding; text-align: center; width: @subwidth - (@epadding * 2); } .form-wrapper { width: 350px; margin: auto; } } .form-template{ margin-bottom: 30px; padding: 0 @bpadding; width: @subwidth; > header{ h1{ color: #464646; font-family: "franklin-gothic-urw-cond"; font-size: 36px; margin: 30px 0 20px; } } .user-instructions{ color: #646464; } .form-snippet{ margin: 30px; width: 600px; } .required{ color: red; } } //General styles for blocks// ul{ margin-left: 40px; } a{ color: #333333; &:hover, &.hover{ color: #ddbc38; } } } } } form.contact-form { header { color: #003663; float: left; font-family: "franklin-gothic-urw-cond"; font-size: 23px; margin-bottom: 20px; width: 100%; } section { float: left; margin-bottom: 20px; width: 100%; > label { clear: both; display: block; float: left; font-family: "pragmatica-web"; font-size: 14px; font-weight: 400; margin-top: 03px; padding-right: 1%; text-align: right; white-space: nowrap; width: 23%; } } > label { clear: both; display: block; float: left; font-family: "pragmatica-web"; font-size: 14px; font-weight: 400; margin-top: 03px; padding-right: 1%; text-align: right; white-space: nowrap; width: 30%; } input[type="text"], textarea, select { border: 01px solid #CCCCCC; box-shadow: none; float: left; margin-bottom: 10px; width: 67%; } input[type="checkbox"] { margin-left: 15%; margin-right: 10px; width: 10px; } .radio { float: left; font-family: "pragmatica-web"; p { color: #646464; margin-bottom: 05px; } input[type="radio"] { display: inline; margin: 0 0 0 10px; width: auto; } label { display: inline; } } textarea { height: 250px; } footer { float: right; width: 74%; margin-left: 25%; text-align: center; button { margin: 0 auto; padding-left: 40px; padding-right: 40px; } } } form.squeeze-form { label { width: 88px; padding-right: 10px; font-weight: bold; font-family: "pragmatica-web"; display: block; text-align: right; clear: both; margin-top: 03px; float: left; } input { border-color: #CCCCCC; box-shadow: none; width: 250px; margin-bottom: 10px; float: left; } footer { float: right; width: 350px; margin-left: 0; text-align: center; button { margin: 30px auto 0; padding-left: 40px; padding-right: 40px; } } } .blockseperator{ margin-left: auto; margin-right: auto; width: 98%; &:after{ background-position: center center; } }