diff --git a/css/form.css b/css/form.css index fdedf98..4c98acd 100644 --- a/css/form.css +++ b/css/form.css @@ -1,44 +1,136 @@ -.ui-widget, .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {font-family:Arial, Helvetica, sans-serif !important;} -input:invalid, textarea:invalid {border-radius: 1px; -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow:0px 0px 5px red; box-shadow:0px 0px 5px red; } -.no-boxshadow input:invalid, .no-boxshadow textarea:invalid {background-color: #f0dddd;} - -form .message {padding:6px 15px; border:1px solid;} -form .good {background-color:#ecf9d0; border-color:#8fbe00;} -form .bad {background-color:#f9d0d0; border-color:#be0000;} - -.checkbox, .radio{margin-top:1px;} - -#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%; 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;} -.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;} -form span.readonly {font-size:16px;} - -form input[disabled]{background-color:#f7f7f7; border:1px solid #dad9d9;} - -form .creditCardField input, form input.currency {padding:5px 1%; width:50px;} -form input.numeric{padding:5px 1%; width:50px;} -form #DMYDate-month, form #DMYDate-day{width:25px;} -form .checkboxset li, form .optionset li{margin-bottom:5px;} - - -@media only screen and (max-width: 700px) { -.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;} +.ui-widget, +.ui-widget input, +.ui-widget select, +.ui-widget textarea, +.ui-widget button { + font-family: Arial, Helvetica, sans-serif !important } - -@media only screen and (min-width: 700px) { -#MemberLoginForm_LoginForm #Remember, #MemberLoginForm_LoginForm .Actions, #MemberLoginForm_LostPasswordForm .Actions{padding-left:30%;} +input:invalid, +textarea:invalid { + border-radius: 1px; + -moz-box-shadow: 0px 0px 5px red; + -webkit-box-shadow: 0px 0px 5px red; + box-shadow: 0px 0px 5px red; +} +.no-boxshadow input:invalid, +.no-boxshadow textarea:invalid { + background-color: #f0dddd +} +form .message { + padding: 6px 15px; + border: 1px solid; +} +form .good { + background-color: #ecf9d0; + border-color: #8fbe00; +} +form .bad { + background-color: #f9d0d0; + border-color: #be0000; +} +.checkbox, +.radio { + margin-top: 1px +} +#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%; + 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; +} +.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 +} +form span.readonly { + font-size: 16px +} +form input[disabled] { + background-color: #f7f7f7; + border: 1px solid #dad9d9; +} +form .creditCardField input, +form input.currency { + padding: 5px 1%; + width: 50px; +} +form input.numeric { + padding: 5px 1%; + width: 50px; +} +form #DMYDate-month, +form #DMYDate-day { + width: 25px +} +form .checkboxset li, +form .optionset li { + margin-bottom: 5px +} +@media only screen and (max-width: 700px) { + .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 + } +} +@media only screen and (min-width: 700px) { + #MemberLoginForm_LoginForm #Remember, + #MemberLoginForm_LoginForm .Actions, + #MemberLoginForm_LostPasswordForm .Actions { + padding-left: 30% + } } \ No newline at end of file diff --git a/css/layout.css b/css/layout.css index 7acecae..047be4a 100644 --- a/css/layout.css +++ b/css/layout.css @@ -1,169 +1,674 @@ -header:after, .main:after, #Root:after, .search-bar:after, header .inner:after, footer:after {height:0;content:".";display:block;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;} - -a.btn{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;} -a.btn:after{content:'\2192'; padding-left:10px; font-size:14px; font-family:Arial, Helvetica, sans-serif;} -a.btn:hover{background:#d80000; color:#fff;} -.content img{border:5px solid #d7d7d7; max-width:60%; height:auto; float:left; margin:6px 20px 10px 0;} -.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:6px; margin:0 0 23px 0; line-height:45px;} -.content-container h1 span.amp{font-family:Baskerville,"Goudy Old Style","Palatino","Book Antiqua",Georgia; font-style:italic;} -.content-container h2{font-size:24px; margin-bottom:15px; padding-top:15px; line-height:32px;} -.content-container h3{font-size:21px; margin-bottom:10px; padding-top:10px;} -.content a{border-bottom:1px dashed #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{-moz-transition:color 0.2s; -webkit-transition:color 0.2s; transition:color 0.2s;} - +header:after, +.main:after, +#Root:after, +.search-bar:after, +header .inner:after, +footer:after { + height: 0; + content: "."; + display: block; + 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 +} +a.btn { + 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; +} +a.btn:after { + content: '\2192'; + padding-left: 10px; + font-size: 14px; + font-family: Arial, Helvetica, sans-serif; +} +a.btn:hover { + background: #d80000; + color: #fff; +} +.content img { + border: 5px solid #d7d7d7; + max-width: 60%; + height: auto; + float: left; + margin: 6px 20px 10px 0; +} +.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: 6px; + margin: 0 0 23px 0; + line-height: 45px; +} + .content-container h1 span.amp { + font-family: Baskerville,"Goudy Old Style","Palatino","Book Antiqua",Georgia; + font-style: italic; + } +.content-container h2 { + font-size: 24px; + margin-bottom: 15px; + padding-top: 15px; + line-height: 32px; +} +.content-container h3 { + font-size: 21px; + margin-bottom: 10px; + padding-top: 10px; +} +.content a { + border-bottom: 1px dashed #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 { + -moz-transition: color 0.2s; + -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-left:10px; padding-right:35px; 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;} -.search-bar form input.action:hover {color:#000;} -.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; } -.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;} - +.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-left: 10px; + padding-right: 35px; + 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; +} +.search-bar form input.action:hover { + color: #000 +} +.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; + } + .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; 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;} - -.content-container{float:right; width:73%; padding-bottom:20px;} -.no-sidebar .content-container{float:left;} -.header{background:#161616;} -.header .inner{padding-top:45px; position:relative; min-height:72px;} - +.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; + 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 + } +.content-container { + float: right; + width: 73%; + padding-bottom: 20px; +} +.no-sidebar .content-container { + float: left +} +.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 {border-top:1px solid #e5e5e5; padding:20px 0; list-style-type:none;} -.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 */ -.footer{color:#999; background:#ededed; padding:20px 0; font-size:11px; line-height:22px;} -.footer a{color:#999;} -.footer a:hover{color:#000;} -.footer .left{float:left; color:#000; display:block; margin-bottom:10px;} -.footer .right{float:right; display:block; margin-bottom:10px;} -.footer span{padding:0 3px; color:#bbb;} -.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-query-trigger{display:none; visibility:hidden;} - -@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;} +.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 { + border-top: 1px solid #e5e5e5; + padding: 20px 0; + list-style-type: none; + } + .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 */ +.footer { + color: #999; + background: #ededed; + padding: 20px 0; + font-size: 11px; + line-height: 22px; +} + .footer a { + color: #999 + } + .footer a:hover { + color: #000 + } + .footer .left { + float: left; + color: #000; + display: block; + margin-bottom: 10px; + } + .footer .right { + float: right; + display: block; + margin-bottom: 10px; + } + .footer span { + padding: 0 3px; + color: #bbb; + } + .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-query-trigger { + display: none; + visibility: hidden; +} +@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; + } } - /* 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{max-width:640px;} -#media-query-trigger{ visibility:visible;} -.brand{float:none; display:inline-block; margin-left:22px; margin-bottom:22px;} -.brand h1{font-size:40px;} -.brand h1{padding-right:80px;} -.header {padding:0px;} -.header .inner{padding:20px 0 0 0; min-height:0;} -.header .primary .nav-open-button {z-index:100; width:20px; height:20px; position:absolute; right:20px; top:32px; display:block; cursor:pointer; font-family:'WebSymbolsRegular'; font-size:20px; color:#ededed;} -.header .primary ul {z-index:10; position:relative; display:none; float:left; margin:0 !important; padding:0; white-space:normal; width:100%;} -.header .primary ul li {width:100%; margin:0 !important; float:none; background:none; position:relative; text-shadow:0 1px #fff;} -.header .primary ul li:after {content:'\003e'; display:block; position:absolute; right:20px; top:0px; font-family:'WebSymbolsRegular'; font-size:14px; color:#999; text-align:center; vertical-align:middle; line-height:38px;} -.header .primary ul li a, .header .primary ul li.current a, .header .primary ul li.section a{padding:10px 0 10px 22px; font-weight:bold; border-bottom:1px solid #bbb; color:#434343; border-radius:0 !important; background:#e7e7e7 !important;} -.header .primary ul li a:hover{color:inherit;} - -/* Search Form */ -.search-bar {width:100%; position:relative; top:0; right:0; display:none; padding:20px 0; margin:0; background-color:#E7E7E7;} -.search-dropdown-icon {display:block; cursor:pointer; width:20px; height:20px; position:absolute; right:60px; top:34px; font-family:'WebSymbolsRegular'; font-size:20px; color:#ededed; text-align:center; line-height:20px;} -.search-bar form {margin:0; width:100%;} -.search-bar form fieldset {padding:0 18px; left:0; right:0; position:relative;} -.search-bar div.field{margin-bottom:0;} -.search-bar form input.text {width:93%; padding:8px 7% 8px 0; text-indent:15px; position:relative; display:block; right:0; left:0; border:1px solid #e5e5e5; background:#fff; font-size:17px;} -.search-bar form input.action {right:24px; top:2px; font-size:18px;} - -/* 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;} -.main .inner{padding:0 22px;} - -/* Secondry Nav */ -.secondary li a{line-height:24px;} -.secondary li .arrow{line-height:26px;} - -/* Footer */ -.footer .right{float:left; width:100%;} +@media only screen and (max-width: 640px) { + body { + max-width: 640px + } + #media-query-trigger { + visibility: visible + } + .brand { + float: none; + display: inline-block; + margin-left: 22px; + margin-bottom: 22px; + } + .brand h1 { + font-size: 40px + } + .brand h1 { + padding-right: 80px + } + .header { + padding: 0px + } + .header .inner { + padding: 20px 0 0 0; + min-height: 0; + } + .header .primary .nav-open-button { + z-index: 100; + width: 20px; + height: 20px; + position: absolute; + right: 20px; + top: 32px; + display: block; + cursor: pointer; + font-family: 'WebSymbolsRegular'; + font-size: 20px; + color: #ededed; + } + .header .primary ul { + z-index: 10; + position: relative; + display: none; + float: left; + margin: 0 !important; + padding: 0; + white-space: normal; + width: 100%; + } + .header .primary ul li { + width: 100%; + margin: 0 !important; + float: none; + background: none; + position: relative; + text-shadow: 0 1px #fff; + } + .header .primary ul li:after { + content: '\003e'; + display: block; + position: absolute; + right: 20px; + top: 0px; + font-family: 'WebSymbolsRegular'; + font-size: 14px; + color: #999; + text-align: center; + vertical-align: middle; + line-height: 38px; + } + .header .primary ul li a, + .header .primary ul li.current a, + .header .primary ul li.section a { + padding: 10px 0 10px 22px; + font-weight: bold; + border-bottom: 1px solid #bbb; + color: #434343; + border-radius: 0 !important; + background: #e7e7e7 !important; + } + .header .primary ul li a:hover { + color: inherit + } + /* Search Form */ + .search-bar { + width: 100%; + position: relative; + top: 0; + right: 0; + display: none; + padding: 20px 0; + margin: 0; + background-color: #E7E7E7; + } + .search-dropdown-icon { + display: block; + cursor: pointer; + width: 20px; + height: 20px; + position: absolute; + right: 60px; + top: 34px; + font-family: 'WebSymbolsRegular'; + font-size: 20px; + color: #ededed; + text-align: center; + line-height: 20px; + } + .search-bar form { + margin: 0; + width: 100%; + } + .search-bar form fieldset { + padding: 0 18px; + left: 0; + right: 0; + position: relative; + } + .search-bar div.field { + margin-bottom: 0 + } + .search-bar form input.text { + width: 93%; + padding: 8px 7% 8px 0; + text-indent: 15px; + position: relative; + display: block; + right: 0; + left: 0; + border: 1px solid #e5e5e5; + background: #fff; + font-size: 17px; + } + .search-bar form input.action { + right: 24px; + top: 2px; + font-size: 18px; + } + /* 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; + } + .main .inner { + padding: 0 22px + } + /* Secondry Nav */ + .secondary li a { + line-height: 24px + } + .secondary li .arrow { + line-height: 26px + } + /* Footer */ + .footer .right { + float: left; + width: 100%; + } } - - -@media print { - * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } - .header, .footer{display:none;} - a, a:visited {text-decoration:underline;} - thead {display:table-header-group;} - tr, img {page-break-inside: avoid;} - img {max-width:100% !important;} - @page {margin:0.5cm;} - p, h2, h3 {orphans:3; widows:3;} - h2, h3 {page-break-after:avoid;} +@media print { + * { + background: transparent !important; + color: black !important; + box-shadow: none !important; + text-shadow: none !important; + filter: none !important; + -ms-filter: none !important; + } + .header, + .footer { + display: none + } + a, + a:visited { + text-decoration: underline + } + thead { + display: table-header-group + } + tr, + img { + page-break-inside: avoid + } + img { + max-width: 100% !important + } } \ No newline at end of file diff --git a/css/tabstrip.css b/css/tabstrip.css index 04b7355..f50812d 100644 --- a/css/tabstrip.css +++ b/css/tabstrip.css @@ -1,13 +1,65 @@ -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 +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 15abc96..01a0967 100644 --- a/css/typography.css +++ b/css/typography.css @@ -2,71 +2,107 @@ @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'); + 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; +@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; +} +em { + font-style: normal +} +a { + color: #b80000; + text-decoration: none; +} +a:hover { + color: #d80000 +} +table { + border-collapse: collapse; + border: 1px solid #d4d4d4; + border-spacing: 0; + margin: 0 0 10px; +} + table tr:nth-child(even) { + background-color: #ededed } - -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;} -em {font-style:normal;} -a {color:#b80000; text-decoration:none;} -a:hover {color:#d80000;} - -table {border-collapse:collapse; border:1px solid #d4d4d4; border-spacing:0; margin:0 0 10px;} -table tr:nth-child(even) {background-color:#ededed;} -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;} - + 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; +} /* WYSIWYG EDITOR ALIGNMENT CLASSES -------------------------------------------- */ .typography .left { - text-align: left; + text-align: left } .typography .center { - text-align: center; + text-align: center } .typography .right { - text-align: right; + text-align: right } - /* IMAGES -------------------------------------------- */ .typography img { - border: none; + border: none } - .typography img.right { +.typography img.right { float: right; margin-left: 20px; - } - .typography img.left { - float: left; - } - .typography img.leftAlone { +} +.typography img.left { + float: left +} +.typography img.leftAlone { float: left; margin-right: 100%; - } - .typography img.center { +} +.typography img.center { float: none; margin-left: auto; margin-right: auto; display: block; - } \ No newline at end of file +} \ No newline at end of file