diff --git a/css/form.css b/css/form.css index 3203cdf..d489ad6 100644 --- a/css/form.css +++ b/css/form.css @@ -1,10 +1,209 @@ -.ui-widget, -.ui-widget input, -.ui-widget select, -.ui-widget textarea, -.ui-widget button { - font-family: Arial, Helvetica, sans-serif !important +/** ---------------------------------------------------------- + * + * This stylesheet includes both generic form styles and + * additional form styles for the User Defined Form Module. + * + ** ------------------------------------------------------- */ + + +/* GENERIC FORMS +----------------------------------------------- */ + +form { + max-width: 500px; + width: 50%; } +div.field { + margin: 10px 0 15px; +} +form label { + margin-bottom: 5px; +} + form label.left { + display: block; + font-weight: bold; + } + form label.right { + font-size: 12px; + color: #888; + } +form input.text, +form textarea, +form .textajaxuniquetext, +form select { + width: 100%; + max-width: 400px; + padding: 6px 5px; + font-size: 15px; + background-color: #fff; + border: 1px solid #dad9d9; +} +form input.text:focus, +form textarea:focus, +form .textajaxuniquetext:focus, +form select:focus { + outline:none; +} +form input[disabled], form textarea[disabled] { + background-color: #f7f7f7; + border: 1px solid #dad9d9; +} + + +/* Radio and Checkbox */ +.field .checkbox, .field .radio { + float: left; + width: 13px; + height: 13px; + margin-right: 6px; + margin-top: 3px; + padding: 0; +} + .checkbox label.right, + .radio label.right { + float: left; + } + + +/* Messages */ +form .message { + background-color: #fef4ba; + padding: 5px 10px; + border: 1px solid #e8c805; + border-radius: 3px; +} + form .good { + background-color: #ecf9d0; + border-color: #8fbe00; + } + form .bad, form .required { + background-color: #f9d0d0; + border-color: #cf0000; + color: #b80000; + } + + +/* ACTIONS */ +.Actions { + margin-bottom: 20px; +} + a.btn, button, input[type="submit"], .Actions .action { + background: #b80000; + color: #fff; + display: inline-block; + border-radius: 4px; + padding: 6px 15px; + margin-top: 10px; + margin-bottom: 10px; + text-transform: uppercase; + letter-spacing: 1px; + border: none; + font-size: 13px; + margin-right: 10px; + } + a.btn:hover, button, input[type="submit"]:hover, .Actions .action:hover { + background: #d80000; + color: #fff; + } + a.btn { + line-height: 18px; + margin-bottom: 10px; + } + a.btn:after { /* creates arrow in button */ + content: '\2192'; + padding-left: 10px; + } + .Actions:after { + color: #B94A48; + content: "* Indicates a required field"; + display: inline-block; + font-weight: normal; + margin-top: 9px; + } + #MemberLoginForm_LoginForm .Actions:after { + display: none; + } + + +/* AREA SPECIFIC */ + /* LOGIN and FORGOT PASSWORD */ + #Remember { + min-height: 20px; + } + + /* Search / Login */ + .header form .middleColumn { + /* float: none; + width: 100% !important; */ + } + + + + + + +/* USER DEFINED USER FORM MODULE STYLES +----------------------------------------------- */ + +/*Generic and mixed*/ +.FormHeading { + clear: both; + padding-top: 15px; +} +form .date .middleColumn input { + background: transparent url(../images/icons/your_icon_here.png) no-repeat scroll 90px 5px; + width: 114px; +} +.Actions input.resetformaction { /* Clear button */ + float: left; + background-color: #888; +} +.Actions input.resetformaction:hover { /* Clear button */ + background-color: #aaa; +} + +/* Labels */ +.checkbox label.right { + font-size: 13px; /* reset to default */ + color: #333; /* reset to default */ +} +form .requiredField label.left:after { + color: #B94A48; + content: "*"; + font-size: 14px; + font-weight: normal; + padding-left: 3px; +} + +/* Radio / Checkbox */ +form .checkboxset ul, +form .optionset ul { + margin: 0; +} + form .checkboxset li, + form .optionset li { + margin-bottom: 5px; + list-style-type:none; + } + +/* Messages */ +span.message { + margin: 10px 0; + display: block; + max-width: 390px; + clear: left; +} +div.holder-required { /* This class needs to be changed - is used for both input and div */ + /* background-color: #f9d0d0; + border: 1px solid #cf0000; + padding: 10px; + margin-left: -11px; */ +} +form input.holder-required { /* This class needs to be changed - is used for both input and div */ + border: 1px solid #cf0000; +} + +/* Error messages */ input:invalid, textarea:invalid { border-radius: 1px; @@ -16,234 +215,39 @@ textarea:invalid { .no-boxshadow textarea:invalid { background-color: #f0dddd } -form { - max-width: 70%; -} -form .message { - float:right; - padding-top: 6px; - color:#b80000; -} -.holder-required { - background-color:#ffb8b8; -} -form .good { - background-color: #ecf9d0; - border-color: #8fbe00; -} -form .bad { - background-color: #f9d0d0; - border-color: #be0000; -} -.checkbox, -.radio { - margin-top: 3px; -} -.checkbox label.right, - .radio label.right { - text-align: left; - padding-left: 0px; - } -#MemberLoginForm_LoginForm_action_dologin, -.Actions .action { - padding: 6px 20px -} -#MemberLoginForm_LoginForm, -#MemberLoginForm_LostPasswordForm { - max-width: 500px -} -#ForgotPassword a { - margin-top: 15px -} -#ForgotPassword { - margin-top: 6px -} -div.field { - width: 100%; + +/* To test - potentially not needed? */ +.ss-uploadfield-item-info button{ + margin-top: 4px !important; float: left; - margin-bottom: 10px; - padding:10px; -} - -.middleColumn div.field { - padding-left:0; - padding-right:0; -} - - -.ui-widget { - font-family: Arial, Helvetica, sans-serif -} -form label.left { - max-width:50%; - padding-right: 5%; - padding-bottom:10px; - margin-top: 3px; - display: block; - font-size: 13px; -} -form label.right { - padding-left: 5%; - display: block; - font-size: 13px; -} -.main form .middleColumn { - float: left; - width: 50% !important; -} - .main form .middleColumn .middleColumn { - width: 100% !important - } -.header form .middleColumn { - float: none; - width: 100% !important; -} -.listbox option { - padding: 3px 0 -} -form input.text, -form textarea, -form .textajaxuniquetext, -form select { - width: 98%; - padding: 6px 1%; - font-size: 15px; - background-color:#fff; - border: 1px solid #dad9d9; -} - -form input.text:focus, -form textarea:focus, -form .textajaxuniquetext:focus, -form select:focus { - outline:none; -} - -form input.sitetreeurlsegment { - width: 200px -} -form span.readonly { - font-size: 16px -} -form input[disabled], form textarea[disabled] { - background-color: #f7f7f7; - border: 1px solid #dad9d9; } form .creditCardField input, -form input.currency { - padding: 5px 1%; - width: 50px; -} +form input.currency, form input.numeric { - padding: 5px 1%; width: 50px; } form #DMYDate-month, form #DMYDate-day { width: 25px } -form .checkboxset ul, -form .optionset ul { - margin: 0; -} -form .checkboxset li, -form .optionset li { - margin-bottom: 5px; - list-style-type:none; -} -form .checkboxset li .checkbox, -form .optionset li .radio{ - margin-top: 1px; -} -a.btn, button, input[type="submit"] { - background: #b80000; - color: #fff; - display: inline-block; - border-radius: 4px; - padding: 6px 15px; - margin-top: 10px; - text-transform: uppercase; - letter-spacing: 1px; - border-bottom: none !important; - font-size: 13px; - border:none; -} -a.btn:hover, button, input[type="submit"]:hover { - background: #d80000; - color: #fff; -} -button{ - background-color:#a4a4a4; -} - -.ss-uploadfield-item-info button{ - margin-top:4px !important; - float:left; -} - -a.btn:after { - content: '\2192'; - padding-left: 10px; - font-size: 14px; - font-family: Arial, Helvetica, sans-serif; -} - -.resetformaction { - float:right; - border-radius:20px; - background-color:#9F9F9F; - border:none; - color:#fff; - font-weight: bold; - font-size: 13px; -} +/* Responsive form styles +----------------------------------------------- */ @media only screen and (max-width: 700px) { - .main form .middleColumn { - float: right; - width: 100% !important; - : ; - } + + /* To test - potentially not needed? */ .header form .middleColumn { float: none; width: 100% !important; - : ; } form label.left, #MemberLoginForm_LoginForm label { margin-bottom: 8px } - div.field { - position:relative; - padding-bottom: 20px; - } - .checkbox label.right, - .radio label.right { - float:left; - text-align: left; - } - form label.left { - width:50%; - padding:0; - } - form label.right { - position: absolute; - right: 10px; - top: 10px; - margin-top: 3px; - width: 50%; - padding: 0; - } - .checkbox label.right, - .radio label.right { - position:relative; - right:auto; - margin-top:-10px; - } } @media only screen and (max-width: 900px) { @@ -253,4 +257,5 @@ a.btn:after { } @media only screen and (min-width: 700px) { + } \ No newline at end of file diff --git a/css/layout.css b/css/layout.css index 0ba852e..7779fb0 100644 --- a/css/layout.css +++ b/css/layout.css @@ -1,3 +1,285 @@ +/** ---------------------------------------------------------- + * + * Contains the main layout of the page and the individual styles. + * Acts as the main stylesheet for theme. + * + * Include your notes or table of contents below.... + * Include color hex's or values of your grid + * + * @author Your Name + * ------------------------------------------------------- */ + +/* MAIN LAYOUT */ +body { + margin: 0; + background: #ededed; + min-width: 240px; + -webkit-text-size-adjust: none; +} + .ie7 body, + .ie8 body { + min-width: 860px + } + .main { + background: #fff; + padding: 40px 0 60px; + min-height: 300px; + } + .inner { + max-width: 1100px; + margin: 0 auto; + padding: 0 30px; + } + .ie6 .inner { + width: 960px + } + .content-container { + float: right; + width: 73%; + } + .no-sidebar .content-container { + float: left; + width:100%; + } + aside { + float: left; + width: 23%; + margin-top: 20px; + } + .no-sidebar aside { + display:none; + } + + +/* HEADER */ +.header { + background: #161616 +} + .header .inner { + padding-top: 45px; + position: relative; + min-height: 72px; + } + + /* Brand */ + .brand, .brand:hover { + float: left; + color: #fff; + display: inline-block; + } + .brand h1 { + margin: 0; + padding: 0; + font-size: 48px; + font-family: "HelveticaNeueLTPro-Bd", "Helvetica Neue LT Pro Bold", "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "Helvetica Neue LT Pro", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; + color: #fff; + font-weight: 600; + font-stretch: normal; + line-height: 1em; + } + .brand p { + color: #888; + margin-bottom: 22px; + } + + /* Search form */ /* TODO: make sure this is not double up from form.css */ + .search-bar { + position: absolute; + right: 30px; + top: 34px; + } + .search-bar form fieldset { + position: relative; + padding: 0; + margin: 0; + } + .search-bar form input.text { + width: 155px; + padding:6px 35px 6px 10px; + color: #888; + margin: 0; + border: none; + border-radius: 20px; + background: #fff; + font-family: Arial, Helvetica, sans-serif; + } + .search-bar form input.active { + color: #000 + } + .search-bar form input.action { + font-size: 15px; + position: absolute; + right: 3px; + top: -1px; + cursor: pointer; + border: none; + padding: 5px; + background: none; + font-family: 'WebSymbolsRegular'; + color: #848484; + border-radius:0; + margin-top:0; + } + .search-bar form input.action:hover { + color: #000 + } + .search-bar form input:focus, + .header textarea:focus { + outline: none + } + #Search { + padding:0; + } + .search-dropdown-icon { + display: none + } + + +/* NAVIGATION */ + + /* Primary navigation */ + .header .primary ul { + /*float: right; margin:23px -12px 0 0;*/ position:absolute; bottom:0; right:17px; + } + .header .primary li { + float: left; + padding-bottom: 17px; + margin: 0 5px; + position: relative; + white-space: nowrap; + } + .header .primary li a { + color: #888; + font-size: 15px; + font-family: Helvetica, Arial, sans-serif; + padding: 6px 8px; + font-weight: bold; + display: block; + } + .header .primary li a:hover { + color: #fff + } + .header .primary li.section a, + .header .primary li.current a { + color: #fff + } + .header .primary li.section:after, + .header .primary li.current:after { + content: '}'; + display: block; + position: absolute; + left: 50%; + margin-left: -7px; + bottom: -6px; + font-family: 'WebSymbolsRegular'; + font-size: 30px; + color: #fff; + text-align: center; + line-height: 20px; + } + + + /* When navigation and logo overlap tablet-nav is initialized */ + .tablet-nav .brand p { + margin-bottom: 0 + } + .tablet-nav .header .inner { + padding-top: 20px + } + .tablet-nav .header .primary ul { + float: left; + clear: both; + position: relative; + margin: 20px 0 4px -12px; + white-space: nowrap; + right: auto; + } + .tablet-nav .header .primary ul li { + margin-bottom: 10px; + padding-bottom: 0; + white-space: nowrap; + } + .tablet-nav .header .primary ul li a { + -moz-transition: none; + -webkit-transition: none; + transition: none; + } + .tablet-nav .header .primary ul li.current a, + .tablet-nav .header .primary ul li.section a { + background-color: #525252; + border-radius: 4px; + } + .tablet-nav .header .primary li.section:after, + .tablet-nav .header .primary li.current:after { + display: none + } + .tablet-nav .footer .right { + float: left; + width: 100%; + } + + /* Secondary navigation */ + .secondary h3 { + font-size: 20px; + color: #b8b7b7; + margin: 0 0 10px 0; + font-family: "CamboRegular", Georgia, "Times New Roman", Times, serif; + font-weight: normal; + } + .secondary { + border-bottom: 1px solid #e5e5e5 + } + .secondary ul { + padding: 0; + margin: 0; + } + .secondary li { + border-top: 1px solid #e5e5e5; + position: relative; + list-style-type: none; + } + .secondary li .arrow { + color: #b80000; + padding-right: 5px; + display: block; + font-size: 15px; + line-height: 20px; + position: absolute; + left: 2px; + top: 5px; + -moz-transition: 0.2s; + -webkit-transition: 0.2s; + transition: 0.2s; + } + .secondary li:hover .arrow { + left: 6px + } + .secondary li a { + padding: 8px 0; + display: block; + width: 100%; + text-transform: uppercase; + letter-spacing: 2px; + font-size: 11px; + color: #333; + line-height: 17px; + font-family: 'Lucida Sans', 'Lucida Grande', Arial, Helvetica, sans-serif; + } + .secondary li .text { + padding-left: 28px; + display: block; + } + .secondary li.section, + .secondary li.current { + background-color: #f7f7f7 + } + .secondary li.section a, + .secondary li.current a { + color: #000 + } + + +/* MIXED */ header:after, .main:after, #Root:after, @@ -10,53 +292,6 @@ footer:after { clear: both; visibility: hidden; } -body { - margin: 0; - background: #ededed; - min-width: 240px; - -webkit-text-size-adjust: none; - font-family: Arial, Helvetica, sans-serif; -} -.ie7 body, -.ie8 body { - min-width: 860px -} -::-moz-selection { - background: #b80000; - color: #fff; - text-shadow: none; -} -::selection { - background: #b80000; - color: #fff; - text-shadow: none; -} -a:link { - -webkit-tap-highlight-color: #b80000 -} - -.brand { - float: left; - display: inline-block; -} - .brand h1 { - margin: 0; - padding: 0; - font-size: 48px; - font-family: "HelveticaNeueLTPro-Bd", "Helvetica Neue LT Pro Bold", "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "Helvetica Neue LT Pro", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; - color: #fff; - font-weight: 600; - font-stretch: normal; - line-height: 1em; - } -.brand, -.brand:hover { - color: #fff -} - .brand p { - color: #888; - margin-bottom: 22px; - } .search-bar form input.action, .header .primary li a, .footer a { @@ -64,284 +299,67 @@ a:link { -webkit-transition: color 0.2s; transition: color 0.2s; } -/* Search Form */ -.search-bar { - position: absolute; - right: 30px; - top: 34px; -} -.search-dropdown-icon { - display: none -} -.search-bar form fieldset { - position: relative; - padding: 0; - margin: 0; -} -.search-bar form input.text { - width: 155px; - padding:6px 35px 6px 10px; - color: #888; - margin: 0; - border: none; - border-radius: 20px; - background: #fff; - font-family: Arial, Helvetica, sans-serif; -} -.search-bar form input.active { - color: #000 -} -.search-bar form input.action { - font-size: 15px; - position: absolute; - right: 3px; - top: -1px; - cursor: pointer; - border: none; - padding: 5px; - background: none; - font-family: 'WebSymbolsRegular'; - color: #848484; - border-radius:0; - margin-top:0; -} -.search-bar form input.action:hover { - color: #000 +body h1 span.amp { + font-family: Baskerville,"Goudy Old Style","Palatino","Book Antiqua",Georgia; + font-style: italic; } -#Search { - padding:0; -} -.search-bar form input:focus, -.header textarea:focus { - outline: none -} -.header .primary ul { - /*float: right; margin:23px -12px 0 0;*/ position:absolute; bottom:0; right:17px; -} -.header .primary li { - float: left; - padding-bottom: 17px; - margin: 0 5px; - position: relative; - white-space: nowrap; -} - .header .primary li a { - color: #888; - font-size: 15px; - font-family: Helvetica, Arial, sans-serif; - padding: 6px 8px; - font-weight: bold; - display: block; +/* PAGE SPECIFIC LAYOUT */ + /* Homepage */ + + /* Search Results */ /* TODO: Test search results styles */ + .searchResults h1 { + font-size: 36px; + margin-bottom: 15px; } - .header .primary li a:hover { - color: #fff - } -.header .primary li.section a, -.header .primary li.current a { - color: #fff -} -.header .primary li.section:after, -.header .primary li.current:after { - content: '}'; - display: block; - position: absolute; - left: 50%; - margin-left: -7px; - bottom: -6px; - font-family: 'WebSymbolsRegular'; - font-size: 28px; - color: #fff; - text-align: center; - line-height: 20px; -} -/* when navigation and logo overlap tablet-nav is initialized */ -.tablet-nav .brand p { - margin-bottom: 0 -} -.tablet-nav .header .inner { - padding-top: 20px -} -.tablet-nav .header .primary ul { - float: left; - clear: both; - position: relative; - margin: 20px 0 4px -12px; - white-space: nowrap; - right: auto; -} - .tablet-nav .header .primary ul li { - margin-bottom: 10px; - padding-bottom: 0; - white-space: nowrap; - } - .tablet-nav .header .primary ul li a { - -moz-transition: none; - -webkit-transition: none; - transition: none; - } - .tablet-nav .header .primary ul li.current a, - .tablet-nav .header .primary ul li.section a { - background-color: #525252; - border-radius: 4px; - } -.tablet-nav .header .primary li.section:after, -.tablet-nav .header .primary li.current:after { - display: none -} -.tablet-nav .footer .right { - float: left; - width: 100%; -} -.header .nav-open-button { - display: none -} -.inner { - max-width: 1100px; - margin: 0 auto; - padding: 0 30px; -} -.ie6 .inner { - width: 960px -} -.main { - background: #fff; - padding: 50px 0 60px; -} -aside { - float: left; - width: 23%; - margin-top: 17px; -} -.secondary h3 { - font-size: 20px; - color: #b8b7b7; - margin: 0 0 8px 0; -} -.secondary { - border-bottom: 1px solid #e5e5e5 -} - .secondary ul { - padding: 0; - margin: 0; - } - .secondary li { - border-top: 1px solid #e5e5e5; - position: relative; - list-style-type: none; - } - .secondary li .arrow { - color: #b80000; - padding-right: 5px; - display: block; - font-size: 15px; - line-height: 20px; - position: absolute; - left: 2px; - top: 5px; - -moz-transition: 0.2s; - -webkit-transition: 0.2s; - transition: 0.2s; - } - .secondary li:hover .arrow { - left: 6px - } - .secondary li a { - padding: 8px 0; - display: block; - width: 100%; - text-transform: uppercase; - letter-spacing: 2px; - font-size: 11px; + .searchResults p.searchQuery { color: #333; - line-height: 17px; - font-family: 'Lucida Sans', 'Lucida Grande', Arial, Helvetica, sans-serif; + margin-bottom: 10px; } - .secondary li .text { - padding-left: 28px; - display: block; + .searchResults ul#SearchResults { + padding: 0 } - .secondary li.section, - .secondary li.current { - background-color: #f7f7f7 - } - .secondary li.section a, - .secondary li.current a { - color: #000 + .searchResults ul#SearchResults li { + border-top: 1px solid #e5e5e5; + padding: 20px 0; + list-style-type: none; } -.content-container { - float: right; - width: 73%; - padding-bottom: 20px; -} -.no-sidebar .content-container { - float: left; - width:100%; -} - -.no-sidebar aside { - display:none; -} - -.header { - background: #161616 -} - .header .inner { - padding-top: 45px; - position: relative; - min-height: 72px; - } -/* Search Results */ -.searchResults h1 { - font-size: 36px; - margin-bottom: 15px; -} -.searchResults p.searchQuery { - color: #333; - margin-bottom: 10px; -} -.searchResults ul#SearchResults { - padding: 0 -} - .searchResults ul#SearchResults li { + .searchResults ul#SearchResults p { + margin-bottom: 12px + } + .searchResults ul#SearchResults a.searchResultHeader { + font-size: 16px; + font-weight: bold; + margin-bottom: 6px; + display: block; + } + .searchResults #PageNumbers { border-top: 1px solid #e5e5e5; - padding: 20px 0; - list-style-type: none; + padding-top: 20px; } - .searchResults ul#SearchResults p { - margin-bottom: 12px - } - .searchResults ul#SearchResults a.searchResultHeader { - font-size: 16px; - font-weight: bold; - margin-bottom: 6px; - display: block; - } -.searchResults #PageNumbers { - border-top: 1px solid #e5e5e5; - padding-top: 20px; -} - .searchResults #PageNumbers a { - padding: 0 5px - } - .searchResults #PageNumbers .pagination { - float: left - } - .searchResults #PageNumbers p { - float: right - } - .searchResults #PageNumbers .next, - .searchResults #PageNumbers .prev { - font-size: 14px - } - .searchResults #PageNumbers .next { - margin-left: 15px - } - .searchResults #PageNumbers .prev { - margin-right: 15px - } -/* Footer */ + .searchResults #PageNumbers a { + padding: 0 5px + } + .searchResults #PageNumbers .pagination { + float: left + } + .searchResults #PageNumbers p { + float: right + } + .searchResults #PageNumbers .next, + .searchResults #PageNumbers .prev { + font-size: 14px + } + .searchResults #PageNumbers .next { + margin-left: 15px + } + .searchResults #PageNumbers .prev { + margin-right: 15px + } + + +/* FOOTER */ .footer { color: #999; background: #ededed; @@ -379,35 +397,43 @@ aside { .footer .primary li { display: inline } -.ie6 .footer .primary li, -.ie7 .footer .primary li { - display: inline; - zoom: 1; - margin-right: 10px; -} -.footer .primary li:after { - padding: 0 3px 0 5px; - content: '/'; - color: #999; -} -.footer .primary li:last-child:after { - content: '' -} -.footer .arrow { - padding: 0 8px 0 5px; - color: #b80000; - font-size: 13px; -} -.footer .primary .nav-open-button { - display: none -} -.footer .primary ul#nav .menu-bubble-arrow { + .ie6 .footer .primary li, + .ie7 .footer .primary li { + display: inline; + zoom: 1; + margin-right: 10px; + } + .footer .primary li:after { + padding: 0 3px 0 5px; + content: '/'; + color: #999; + } + .footer .primary li:last-child:after { + content: '' + } + .footer .arrow { + padding: 0 8px 0 5px; + color: #b80000; + font-size: 13px; + } + .footer .primary .nav-open-button { + display: none; + } + .footer .primary ul#nav .menu-bubble-arrow { + display: none; + } + + + +/* DEVICE & RESPONSIVE LAYOUT */ +.header .nav-open-button { display: none } #media-query-trigger { display: none; visibility: hidden; } + @media only screen and (max-width: 960px) { .content img { max-width: 97%; @@ -418,6 +444,7 @@ aside { -webkit-padding-start: 0px; } } + /* when changing the breakpoint below, change it ito the same value in the script.js file as well */ @media only screen and (max-width: 640px) { body { @@ -502,6 +529,7 @@ aside { .header .primary ul li a:hover { color: inherit } + /* Search Form */ .search-bar { width: 100%; @@ -557,9 +585,10 @@ aside { top: 2px; font-size: 18px; } + /* Main Content */ .main { - padding: 20px 0 45px + padding: 20px 0 45px; } .content-container, aside { @@ -595,6 +624,7 @@ aside { width: 100%; } } + @media print { * { background: transparent !important; diff --git a/css/reset.css b/css/reset.css index 71c32fb..01eb33e 100644 --- a/css/reset.css +++ b/css/reset.css @@ -30,7 +30,7 @@ input[type="checkbox"], input.checkbox, .checkboxes input {vertical-align:bottom .ie6 input {vertical-align: text-bottom;} label, input[type="button"], input[type="submit"], input[type="image"], button, .btn {cursor:pointer;} button, input, select, textarea {margin:0;} -.checkbox, .radio {float:left; width:13px; height:13px; margin-right:6px; padding:0;} +/* .checkbox, .radio {float:left; width:13px; height:13px; margin-right:6px; padding:0;} */ button {width:auto; overflow:visible;} .ie7 img {-ms-interpolation-mode: bicubic;} diff --git a/css/tabstrip.css b/css/tabstrip.css deleted file mode 100644 index f50812d..0000000 --- a/css/tabstrip.css +++ /dev/null @@ -1,65 +0,0 @@ -ul.tabstrip { - padding: 0; - margin: 0 !important; - clear: left; - float: left; - width: 100%; - position: relative; -} -ul.tabstrip { - padding: 0; - margin: 0 !important; - clear: left; - float: left; - width: 100%; - position: relative; -} - ul.tabstrip li { - float: left; - background: #ddd; - cursor: pointer; - position: relative; - top: 0; - border: 1px solid #ddd; - border-bottom: none; - margin: 0 5px 0 0; - border-radius: 3px 3px 0 0; - } - ul.tabstrip li a { - display: block; - float: left; - padding: 5px 13px 5px; - text-decoration: none; - font-weight: bold; - outline: none; - color: #333; - } - ul.tabstrip li a:hover { - text-decoration: none - } - ul.tabstrip li.current, - ul.tabstrip li.ui-tabs-selected, - ul.tabstrip li.sel { - background: #fff; - top: 0; - } - ul.tabstrip li:hover { - background-color: #eee - } - ul.tabstrip li.current:hover { - background-color: #fff - } - ul.tabstrip li.current a, - ul.tabstrip li.ui-tabs-selected a, - ul.tabstrip li.sel a { - color: #333 - } -.tab { - clear: left; - overflow: auto; - border: 1px solid #ddd; - border-top: none; - margin: 0; - padding: 10px 15px; - background-color: #fff; -} \ No newline at end of file diff --git a/css/typography.css b/css/typography.css index 13e1d62..2b8cc1a 100644 --- a/css/typography.css +++ b/css/typography.css @@ -1,118 +1,143 @@ -/* Generated by Font Squirrel (http://www.fontsquirrel.com) on February 20, 2012 06:04:25 AM America/New_York */ -@font-face { - font-family: 'CamboRegular'; - src: url('../webfonts/Cambo-Regular-webfont.eot'); - src: url('../webfonts/Cambo-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('../webfonts/Cambo-Regular-webfont.woff') format('woff'), url('../webfonts/Cambo-Regular-webfont.ttf') format('truetype'), url('../webfonts/Cambo-Regular-webfont.svg#CamboRegular') format('svg'); - font-weight: normal; - font-style: normal; -} -@font-face { - font-family: 'WebSymbolsRegular'; - src: url('../webfonts/websymbols-regular-webfont.eot'); - src: url('../webfonts/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../webfonts/websymbols-regular-webfont.woff') format('woff'), url('../webfonts/websymbols-regular-webfont.ttf') format('truetype'), url('../webfonts/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg'); - font-weight: normal; - font-style: normal; -} +/** ---------------------------------------------------------- + * + * Contains the generic theme typography styles + * + * Include your notes or table of contents here + * + * Include color hex's or values of your grid + * #333333 - body + * #B80000 - links, headings + * #D80000 - links on hover + * 5px Vertical grid - based on multiples of 5px, eg 10px, 15px, 20px, 25px... + * + * @author Your Name + * + * ------------------------------------------------------- */ + +/* TEMPLATE CUSTOM FONTS */ + /* Generated by Font Squirrel (http://www.fontsquirrel.com) on February 20, 2012 06:04:25 AM America/New_York */ + @font-face { + font-family: 'CamboRegular'; + src: url('../webfonts/Cambo-Regular-webfont.eot'); + src: url('../webfonts/Cambo-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('../webfonts/Cambo-Regular-webfont.woff') format('woff'), url('../webfonts/Cambo-Regular-webfont.ttf') format('truetype'), url('../webfonts/Cambo-Regular-webfont.svg#CamboRegular') format('svg'); + font-weight: normal; + font-style: normal; + } + @font-face { + font-family: 'WebSymbolsRegular'; + src: url('../webfonts/websymbols-regular-webfont.eot'); + src: url('../webfonts/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../webfonts/websymbols-regular-webfont.woff') format('woff'), url('../webfonts/websymbols-regular-webfont.ttf') format('truetype'), url('../webfonts/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg'); + font-weight: normal; + font-style: normal; + } + + +/* BASE TYPOGRPHY */ body { font-size: 13px; + line-height: 20px; + margin-bottom: 20px; + color: #333333; font-family: Arial, Helvetica, sans-serif; } -h1, -h2, -h3, -h4, -h5, -h6 { + body a { text-decoration: none; } + body a:link { -webkit-tap-highlight-color: #b80000 } + + +/* HEADERS */ +.typography h1, +.typography h2, +.typography h3, +.typography h4, +.typography h5, +.typography h6 { font-family: "CamboRegular", Georgia, "Times New Roman", Times, serif; font-weight: normal; color: #b80000; -} -p { - margin: 0 0 17px; - font-size: 13px; - line-height: 21px; -} -em { - font-style: normal -} -a { - color: #b80000; - text-decoration: none; -} -a:hover { - color: #d80000 -} - -.typography h1 a{ - border:none; -} - -.typography ul { - margin: 20px 0 20px 30px -} -.typography li { - line-height: 22px; - margin-bottom: 5px; - list-style-type: disc; -} -.typography h1 { - font-size: 36px; - border-bottom: 1px solid #e5e5e5; - padding-bottom: 6px; - margin: 0 0 23px 0; - line-height: 45px; -} - .typography h1 span.amp { - font-family: Baskerville,"Goudy Old Style","Palatino","Book Antiqua",Georgia; - font-style: italic; - } -.typography h2 { - font-size: 24px; - margin-bottom: 15px; - padding-top: 15px; - line-height: 32px; -} -.typography h3 { - font-size: 21px; margin-bottom: 10px; - padding-top: 10px; } -.typography a { - border-bottom: 1px dashed #b80000 +.typography h1 { font-size: 36px; + line-height: 45px; + margin: 0 0 25px 0; + border-bottom: 1px solid #e5e5e5; + padding-bottom: 5px; +} +.typography h2 { font-size: 28px; line-height: 35px; margin-bottom: 15px; padding-top: 10px; } +.typography h3 { font-size: 22px; line-height: 30px; margin-bottom: 10px; } +.typography h4 { font-size: 18px; line-height: 25px; margin-bottom: 5px; } +.typography h5 { font-size: 16px; line-height: 20px; margin-bottom: 5px; } +.typography h6 { font-size: 14px; line-height: 20px; font-weight: bold; margin-bottom: 5px; } + + +/* PARAGRAGHS */ +.typography p { font-size: 13px; line-height: 20px; margin: 0 0 20px; } + .typography .intro { + font-family: "CamboRegular", Georgia, "Times New Roman", Times, serif; + font-size: 22px; + line-height: 32px; + margin-bottom: 20px; + } +.typography em { font-style: italic; } +::-moz-selection { + background: #b80000; + color: #fff; + text-shadow: none; +} +::selection { + background: #b80000; + color: #fff; + text-shadow: none; } -table { +/* LINKS */ +.typography a, +.typography a.intro { + color: #B80000; + text-decoration: none; + border-bottom: 1px dashed #B80000; +} + .typography a:hover { color: #D80000; } + .typography a:focus { } + + +/* LIST STYLES +-------------------------------------------- */ +.typography ul, +.typography ol, +.typography dl { margin: 0 0 20px 25px; } +.typography ul li { list-style-type: disc; } + .typography li { margin-bottom: 5px; } + + +/* TABLE STYLES +-------------------------------------------- */ +.typography table { border-collapse: collapse; border: 1px solid #d4d4d4; border-spacing: 0; margin: 0 0 10px; + text-align: left; } - table tr:nth-child(even) { + .typography table tr:nth-child(even) { background-color: #ededed } - table tr.even, - .content table th, - .content thead td { + .typography table tr.even, + .typography table th, + .typography thead td { background-color: #ededed } - table td, - .content table th { + .typography table td, + .typography table th { padding: 2px 5px; border: 1px solid #d4d4d4; vertical-align: top; } - table th { - text-align: left; + .typography table th { font-weight: bold; } -p.intro { - font-family: "CamboRegular", Georgia, "Times New Roman", Times, serif; - font-size: 22px; - line-height: 32px; - margin-bottom: 20px; - color: #222; -} + + /* WYSIWYG EDITOR ALIGNMENT CLASSES -------------------------------------------- */ .typography .left { @@ -124,38 +149,104 @@ p.intro { .typography .right { text-align: right } + + /* IMAGES -------------------------------------------- */ .typography img { border: 5px solid #d7d7d7; - max-width: 60%; - height: auto; - float: left; - margin: 6px 20px 10px 0; -} -.typography img.left, .typography img.right { - border: 5px solid #d7d7d7; - max-width: 60%; height: auto; + background: transparent url(../images/ajax-loader.gif) no-repeat center center; } .typography img.left { float: left; - margin: 6px 20px 10px 0; + max-width: 50%; + margin: 5px 20px 10px 0; } .typography img.right { float: right; - margin: 6px 0 10px 20px; + max-width: 50%; /* Responsive width */ + margin: 5px 0 10px 20px; } - .typography img.leftAlone { float: left; margin-right: 100%; + margin-bottom: 10px; + clear: both; } .typography img.center { float: none; margin-left: auto; margin-right: auto; display: block; + margin-bottom: 10px; + clear: both; +} +.typography .captionImage { width: 100%; margin-top: 5px; } +.typography .captionImage img { margin: 0; } + .typography .captionImage.left { + float: left; + margin: 5px 30px 20px 0px; + } + .typography .captionImage.right{ + float: right; + margin: 5px 0 20px 30px; + } + .typography .captionImage.left[style], + .typography .captionImage.right[style] { + max-width: 50%; /* Overides core width to make responsive */ + } + .typography .captionImage.left img, + .typography .captionImage.right img { + float: none; + max-width: none; + width: 100%; + } + .typography .captionImage.left img { + margin-right: -10px; + } + .typography .captionImage.right img { + margin-left: -10px; + } +.typography .captionImage.leftAlone{ + float:none; + margin: 0 20px 20px 0px; +} +.typography .captionImage.center{ + margin: 0 auto 20px; +} +.typography .captionImage p { + clear: both; + margin: 5px 0; + font-style: italic; + color: #888; } +/* BLOCKQUOTES +-------------------------------------------- */ +.typography blockquote { + background: transparent url(../images/blockquote.png) no-repeat 0px 6px; + font-family: "CamboRegular", Georgia, "Times New Roman", Times, serif; + color: #777; + display: block; + font-style: italic; + margin: 0 0 20px; + float: right; + text-indent: 30px; + width: 45%; + margin-left: 5%; + clear: both; +} +.typography blockquote p { + font-size: 17px; + line-height: 25px; +} +.typography pre { + background: #F7F7F7; + border: 1px solid #E4E4E4; + font-family: Courier, monospace; + margin: 0 0 20px 0; + padding: 15px; + clear: both; +} \ No newline at end of file diff --git a/images/blockquote.png b/images/blockquote.png new file mode 100644 index 0000000..741e503 Binary files /dev/null and b/images/blockquote.png differ diff --git a/javascript/script.js b/javascript/script.js index 04194c7..b0ec808 100644 --- a/javascript/script.js +++ b/javascript/script.js @@ -84,6 +84,7 @@ jQuery.noConflict(); searchBar.slideUp(); menu.slideToggle(200); }); + }    }); diff --git a/templates/Includes/Footer.ss b/templates/Includes/Footer.ss index a3f7bb1..81bdbaf 100644 --- a/templates/Includes/Footer.ss +++ b/templates/Includes/Footer.ss @@ -1,6 +1,6 @@ \ No newline at end of file