diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..df27367 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +webfonts/.DS_Store +images/.DS_Store \ No newline at end of file diff --git a/css/Form.css b/css/Form.css index 3287def..d7372f7 100755 --- a/css/Form.css +++ b/css/Form.css @@ -16,8 +16,10 @@ form .bad {background-color:#f9d0d0; border-color:#be0000;} div.field{width:100%; float:left; margin-bottom:20px;} .ui-widget{font-family:Arial, Helvetica, sans-serif;} form label.left {float:left; width:25%; padding-right:5%; margin-top:3px; display:block; font-size:13px;} -form .middleColumn {float:right; width:70% !important;} -form .middleColumn .middleColumn{width:100% !important;} +.main form .middleColumn {float:right; width:70% !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;} form input.sitetreeurlsegment{width:200px;} @@ -32,7 +34,8 @@ form .checkboxset li, form .optionset li{margin-bottom:5px;} @media only screen and (max-width: 700px) { -form .middleColumn {float:right; width:100% !important;;} +.main form .middleColumn {float:right; width:100% !important;;} +.header form .middleColumn {float:none; width:100% !important;;} form label.left, #MemberLoginForm_LoginForm label{margin-bottom:8px;} } diff --git a/css/layout.css b/css/layout.css index 8e92db8..8af740b 100755 --- a/css/layout.css +++ b/css/layout.css @@ -1,6 +1,6 @@ header:after, .main:after, #Root:after {height:0;content:".";display:block;clear:both;visibility:hidden;} -body{background:#ededed; min-width:240px;-webkit-text-size-adjust:none; font-family:Arial, Helvetica, sans-serif;} +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;} @@ -14,32 +14,73 @@ a.btn:hover{background:#d80000; color:#fff;} .content ul{margin:20px 0 20px 30px;} .content li{line-height:22px; margin-bottom:5px; list-style-type:disc;} -.content-container h1{font-size:36px; border-bottom:1px solid #e5e5e5; padding-bottom:7px; margin-bottom:23px;} +.content-container h1{font-size:36px; border-bottom:1px solid #e5e5e5; padding-bottom:7px; margin:0 0 23px 0;} .content-container h1 span.amp{font-family:Baskerville,"Goudy Old Style","Palatino","Book Antiqua",Georgia; font-style:italic;} .content-container h2{font-size:25px; margin-bottom:15px; padding-top:15px;} .content-container h3{font-size:21px; margin-bottom:10px; padding-top:10px;} .content a{border-bottom:1px dashed #b80000;} -.brand{float:left;} -.brand h1{font-size:50px; 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{float:left; display:block;} +.brand h1{margin:0; padding:0; font-size:50px; 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;} -.header .primary ul{float:right; margin:24px -15px 0 0; white-space:nowrap;} -.header .primary li{float:left; padding-bottom:20px; margin:0 5px;} -.header .primary li a{color:#888; font-size:15px; font-family:Helvetica, Arial, sans-serif; padding:6px 8px; border-radius:4px; font-weight:bold; display:block; -moz-transition:color 0.2s; -webkit-transition:color 0.2s; transition:color 0.2s;} +/* Log in Form */ + +#MemberLoginForm_LoginForm fieldset { border:none; padding-left:0px;} +#MemberLoginForm_LoginForm fieldset #Email label {margin-top:7px;} +#MemberLoginForm_LoginForm fieldset #Email input.text {border:1px solid #e5e5e5; border-radius:4px; color:#888; background:#ededed; margin:0;} +#MemberLoginForm_LoginForm fieldset #Email input.text:focus {outline:none; background:#fff;} +#MemberLoginForm_LoginForm fieldset #Password label {margin-top:7px;} +#MemberLoginForm_LoginForm fieldset #Password input.text {border:1px solid #e5e5e5; border-radius:4px; color:#888; background:#ededed; margin:0;} +#MemberLoginForm_LoginForm fieldset #Password input.text:focus {outline:none; background:#fff;} + +#MemberLoginForm_LoginForm .Actions input {cursor:pointer; text-align:center; color:#fff; background-color:#888; border:none; border-radius:4px; font-size: 13px; + font-weight: bold; margin: 5px 0; padding:5px; 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;} + +/* Search Form */ +.search-bar {position:absolute; right:0; top:18px; max-width: 1100px; margin: 0 auto; padding: 0 30px 0 0;} +.search-dropdown-icon {display:none;} +.search-bar .search-bubble-arrow {display:none;} +.search-bar form {margin:10px 0 0 0; float:right; width:200px;} +.search-bar form fieldset {position:relative; padding:0; margin:0;background:#ededed; border:1px solid #888; border-radius:4px;} +.search-bar form div.field {margin:0;} +.search-bar form div.field .middleColumn {float:none; width:100%;} +.search-bar form input.text {text-indent:32px; float:left; color:#888; margin:0; border:0px; border-radius:4px; background:transparent;} +.search-bar form input.action {background:transparent url(../images/search-icon.png) 5px 5px no-repeat; text-indent:-9999em; position:absolute; left:0px; cursor:pointer; height:32px; width:35px; border:none; + border-top-left-radius:4px; border-bottom-left-radius:4px; padding:0;} +.search-bar form input.action:active {background:transparent url(../images/search-icon-active.png) center 5px no-repeat;} +.search-bar form input:focus, .header textarea:focus {outline:none; background:#fff;} + +/* navigation visible when menu items overflow the 1100px width and when users don't have javascript enabled*/ + +.header .primary ul {float:right; margin:24px -15px 0 0; white-space:normal; padding:0;} +.header .primary ul .menu-bubble-arrow {display:none;} +.header .primary ul li{float:left; margin:0 0 10px 6px; padding-bottom:0; background-image:none; list-style-type:none;} +.header .primary ul li.current a, .header .primary ul li.section a{background-color:#525252;} +.header .primary li a{letter-spacing:1px; color:#888; font-size:15px; font-family:Helvetica, Arial, sans-serif; padding:6px 8px; border-radius:4px; font-weight:bold; display:block; -moz-transition:color 0.2s; -webkit-transition:color 0.2s; transition:color 0.2s;} .header .primary li a:hover{color:#fff;} .header .primary li.section a, .header .primary li.current a{color:#fff;} -.header .primary li.section, .header .primary li.current{background:url(../images/selected.png) center bottom no-repeat;} + + /* fancy javascript initiated menu - for when menu items fit within the 1100px width (nowrap)*/ + +.header .primary ul.standard-nav{float:right; margin:24px -15px 0 0; white-space:nowrap;} +.header .primary ul.standard-nav .menu-bubble-arrow {display:none;} +.header .primary .standard-nav li{float:left; padding-bottom:20px; margin:0 5px;} +.header .primary .standard-nav li.section, .header .primary li.current {background:url(../images/selected.png) center bottom no-repeat;} +.header .primary ul.standard-nav li.current a, .header .primary ul.standard-nav li.section a {background:none;} -.inner{max-width:1100px; margin:0 auto; padding:0 30px; overflow-x:hidden;} +.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:20%; margin-top:17px;} -.secondary h3{font-size:20px; color:#b8b7b7; margin-bottom:11px;} +.secondary h3{font-size:20px; color:#b8b7b7; margin:0 0 8px 0;} .secondary {border-bottom:1px solid #e5e5e5;} -.secondary li{border-top:1px solid #e5e5e5; position:relative;} +.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;} @@ -50,39 +91,72 @@ aside{float:left; width:20%; margin-top:17px;} .content-container{float:right; width:75%; padding-bottom:20px;} .no-sidebar .content-container{float:left;} .header{background:#161616;} -.header .inner{padding-top:55px;} +.header .inner{padding-top:55px; position:relative;} + +/* Search Results */ + + +.searchResults h1 { font-size:36px; margin-bottom:15px;} +.searchResults p.searchQuery {color:#333; margin-bottom:10px;} + +.searchResults ul#SearchResults {padding-left:20px;} +.searchResults ul#SearchResults li {margin-bottom:20px; list-style-type:none;} +.searchResults ul#SearchResults p {font-size:1.1em; font-weight:normal; line-height:2em;} +.searchResults ul#SearchResults a.searchResultHeader {font-size:1.3em; font-weight:bold; text-decoration:none; margin:20px 0 8px 0;} +.searchResults ul#SearchResults a {text-decoration:none;} .footer{color:#999; background:#ededed; padding:20px 0; font-size:11px; line-height:22px;} .footer a{color:#999;} .footer .left{float:left; color:#000; display:block;} .footer .right{float:right; display:block;} .footer span{padding:0 3px; color:#bbb;} -.footer .primary, .footer .primary ul{display:inline;} +.footer .primary, .footer .primary ul{display:inline; margin:0; padding:0;} .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 {display:none;} @media only screen and (max-width: 960px) { .content img{width:97%; height:auto; margin:0 0 20px;} +.header .primary ul {margin-left:-12px; -webkit-padding-start: 0px;} } @media only screen and (max-width: 700px) { -.brand{margin-left:12px; margin-bottom:15px;} -.header .inner{padding:10px 0 5px 5px;} -.header .primary ul {float:left; width:100%; margin:10px 0 0 0; white-space:normal;} -.header .primary ul li{margin:0 0 10px 6px; padding-bottom:0; background-image:none !important;} -.header .primary ul li.current a, .header .primary ul li.section a{background-color:#525252;} +.brand{float:none; display:inline-block; margin-left:12px; margin-bottom:10px;} +.brand h1{font-size:30px;} +.header {padding:0px;} +.header .inner{padding:10px 0 0 0;} +.header .primary {height:42px;} +.primary .nav-open-button {z-index:100; position:relative; padding:6px 0; background:#525252; width:100%; height:30px; display:block; cursor:pointer; font-family:'WebSymbolsRegular'; font-size:20px; color:#ededed; text-indent:10px; + text-align:left; line-height:30px; -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.3);-moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.3);box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.3);} +.primary .nav-open-button .menu-text {letter-spacing:1px; margin-left:10px; color:#fff; font-size:15px; font-family:Helvetica, Arial, sans-serif; font-weight:bold;} +.primary ul#nav .menu-bubble-arrow {z-index:110; display:none; color:#525252; height:20px; width:20px;position:absolute; left:10px; top:-7px; font-family:'WebSymbolsRegular'; font-size:20px;text-align:center; line-height:20px; + text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);} +.header .primary ul {position:relative; background:#ededed; display:none; float:left; margin:0; padding:0; width:100%; white-space:normal; -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);-moz-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);} +.header .primary ul#nav li{width:100%; margin:0; float:none; background:none;} +.header .primary ul#nav li a {padding:8px 0 8px 40px; font-weight:normal;} +.header .primary ul#nav li a:hover {color:#525252;} +.header .primary ul#nav li.current a, .header .primary ul#nav li.section a{border-radius:0; background-color:#999; color:#fff;} +/* Search Form */ +.search-bar {z-index:200; position:absolute; top:50px; display:none; padding:5px 0; height:32px; margin:0; background-color:#303030;-webkit-box-shadow: -1px 1px 5px 0px rgba(0, 0, 0, 0.3);-moz-box-shadow: -1px 1px 5px 0px rgba(0, 0, 0, 0.3);box-shadow: -1px 1px 5px 0px rgba(0, 0, 0, 0.3);} +.search-dropdown-icon {display:block; cursor:pointer; width:20px; height:20px; position:absolute; right:10px; top:14px; font-family:'WebSymbolsRegular'; font-size:20px; color:#ededed; text-align:center; line-height:20px;} +.search-bar .search-bubble-arrow {display:block; height:20px; width:20px;position:absolute; right:14px; top:-12px; font-family:'WebSymbolsRegular'; font-size:20px; color:#303030; text-align:center; line-height:20px;} +.search-bar form {display:none; float:right; margin:0 5px; height:32px;} + +/* Main Content */ .main{padding:20px 0 45px;} .content-container, aside{width:100%;} .content-container h1{font-size:30px; margin-bottom:15px; padding-bottom:3px;} .content-container p{font-size:14px; line-height:23px;} p.intro{font-size:19px; line-height:27px;} -.inner{padding:0 22px;} +.main .inner{padding:0 22px;} +/* Secondry Nav */ .secondary li a{line-height:24px;} .secondary li .arrow{line-height:26px;} +/* Footer */ .footer .right{float:left; padding-top:14px; width:100%;} } diff --git a/css/typography.css b/css/typography.css index e0a7148..bae6578 100755 --- a/css/typography.css +++ b/css/typography.css @@ -1,4 +1,4 @@ -/* Generated by Font Squirrel (http://www.fontsquirrel.com) on March 26, 2012 09:18:54 AM America/New_York */ +/* 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'); @@ -10,6 +10,17 @@ 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; + } + body {font-size:13px; font-family:Arial, Helvetica, sans-serif;} h1, h2,h3,h4,h5,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;} @@ -23,4 +34,4 @@ table tr.even, .content table th, .content thead td {background-color:#ededed;} table td, .content table th {padding:2px 5px;border:1px solid #d4d4d4; vertical-align:top;} table th {text-align:left; 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;} \ No newline at end of file +p.intro{font-family:"CamboRegular", Georgia, "Times New Roman", Times, serif; font-size:22px; line-height:32px; margin-bottom:20px; color:#222;} diff --git a/images/search-icon-active.png b/images/search-icon-active.png new file mode 100644 index 0000000..c52a721 Binary files /dev/null and b/images/search-icon-active.png differ diff --git a/images/search-icon.png b/images/search-icon.png new file mode 100644 index 0000000..d6d63af Binary files /dev/null and b/images/search-icon.png differ diff --git a/javascript/script.js b/javascript/script.js new file mode 100644 index 0000000..6d7d3a8 --- /dev/null +++ b/javascript/script.js @@ -0,0 +1,67 @@ +jQuery.noConflict(); + +(function($) {     +    $(document).ready(function() { +         + /* turns on specific styling when main nav items are less than the width of the header otherwise it defaults to mediaquery multiline styling */ + function toggleNavigationClassByWidth(){ +            var primaryNavigation = $('.primary').first(); +            var mainNavigation = $(primaryNavigation).find('ul').first(); + +            if(primaryNavigation.outerWidth() > mainNavigation.outerWidth()) { +               mainNavigation.addClass("standard-nav"); //if the nav ul fits within its container the standard styling is applied +            } +            else { +               mainNavigation.removeClass("standard-nav"); +            } +        } +         +        var resizeTimer; //constantly checks for the size of the browser window so correct style is applied. +        $(window).resize(function(){ +            clearTimeout(resizeTimer); +            resizeTimer = setTimeout(toggleNavigationClassByWidth, 100); +        }).load(function(){ +            clearTimeout(resizeTimer); +            resizeTimer = setTimeout(toggleNavigationClassByWidth, 100); +        }); + + /* show/hide search form when window width less than 700px */ + $('span.search-dropdown-icon').on('click',function() { + if ($(window).width() < 700) { // checks for width of window - if it is less than 700px + if ($('div.search-bar').is(":hidden")){ //checks if ul#nav is hidden + $('div.search-bar').slideDown('fast'); // slides the Search bar down + $('div.search-bar form').fadeIn(500); // Fades the Search form in + return false; + } else { + $('div.search-bar').slideUp('fast'); // slides the Search bar up + $('div.search-bar form').hide(); // Fades the Search form out + return false; + } + } + }); + + /* show/hide main nav menu when window width less than 700px */ + $('span.nav-open-button').on('click',function() { + if ($(window).width() < 700) { // checks for width of window - if it is less than 700px + if ($('ul#nav').is(":hidden")){ //checks if ul#nav is hidden + $('ul#nav').slideDown('fast'); // slides the nav menu down + $('header span.menu-bubble-arrow').show(); // shows the nav menu arrow + return false; + } else { + $('ul#nav').slideUp('fast'); // slides the nav menu up + $('header span.menu-bubble-arrow').removeAttr("style"); // hides the nav menu arrow + return false; + } + } + }); + /* clears any inline styles when window is resized above 700px */ + $(window).resize(function () { + if ($(this).width() >= 700) { + $('div.search-bar').removeAttr("style"); + $('ul#nav').removeAttr("style"); + $('div.search-bar form').removeAttr("style"); + $('span.search-bubble-arrow').removeAttr("style"); + } + }); +    }); +}(jQuery)); diff --git a/templates/Includes/Header.ss b/templates/Includes/Header.ss index cdbc4b4..580120b 100755 --- a/templates/Includes/Header.ss +++ b/templates/Includes/Header.ss @@ -3,6 +3,11 @@

Simple.

 + L +
+ $SearchForm + } +
<% include Navigation %> \ No newline at end of file diff --git a/templates/Includes/Navigation.ss b/templates/Includes/Navigation.ss index 0d76325..112fbd1 100755 --- a/templates/Includes/Navigation.ss +++ b/templates/Includes/Navigation.ss @@ -1,5 +1,7 @@