/* Structure & Layout --------------------------------------------*/ * { margin: 0; padding: 0; } html, body { height: 100%; } body { margin: 0; padding: 0; color: #444; background: #055fad url("/template/body-bg.gif") repeat-x; text-align: center; } body { font: 12px/20px arial, helvetica, sans-serif; } * html div#container { height: 100%; } div#container { width: 1005px; min-height: 100%; margin: 0 auto; background: url("/template/container-bg.gif") repeat-y; text-align: left; } div#containerInside { padding: 0 50px 1px; background: url("/template/containerInside-bg.gif") no-repeat; } div#subNav { width: 910px; height: 40px; margin: 5px 0 10px; background: url("/template/subnav-bg.gif") no-repeat; color: #fff; font-size: 11px; } div#subNav div.box { display: inline; padding: 5px 20px 0 0; } div#subNav div#loginBox { float: left; } div#subNav div#searchBox, div#subNav div#linksBox { float: right; } div#subNav p { margin: 0; } div#subNav div#loginBox { margin: 0 0 0 20px; } div#subNav div#loginBox p, div#subNav div#searchBox p { float: left; } div#subNav div#linksBox p { text-align: right; } div.block { width: 900px; margin: 0 5px 15px; background: url("/template/block-bg.gif") repeat-y; } div.blockInsideT { width: 900px; background: url("/template/block-top.gif") no-repeat left top; } div.blockInsideB { width: 900px; background: url("/template/block-bottom.gif") no-repeat left bottom; } div.sideColumn { display: inline; float: left; width: 235px; margin: 0 0 0 10px; padding: 10px 0; } div.wideColumn { display: inline; float: left; width: 640px; margin: 15px 0 5px 0; background: url("/template/blockInside-bg.gif") repeat-y; } div.wideColumnInsideT { background: url("/template/blockInside-top.gif") no-repeat left top; } div.wideColumnInsideB { padding: 0 15px 10px 25px; background: url("/template/blockInside-bottom.gif") no-repeat left bottom; } div.calSideColumn { display: inline; float: left; width: 150px; margin: 0 0 0 15px; padding: 10px 0; } div.calWideColumn { display: inline; float: left; width: 715px; margin: 15px 0 5px 5px; background: url("/template/calInside-bg.gif") repeat-y; } div.calWideColumnInsideT { background: url("/template/calInside-top.gif") no-repeat left top; } div.calWideColumnInsideB { padding: 0 15px 25px 25px; background: url("/template/calInside-bottom.gif") no-repeat left bottom; } div#footer { padding: 15px 0; text-align: center; } div#footer img { vertical-align: middle; } ul.articlesList { margin: 0; padding: 0; list-style: none; } ul.articlesList li { margin: 0 0 10px; padding: 0; font-weight: bold; } div#copyright { margin: 0 0 10px; } div#albums { display: inline; float: left; width: 120px; } div#albumPhotos { display: inline; float: left; width: 480px; } /* Navigation --------------------------------------------*/ ul#nav { width: 910px; height: 75px; margin: 0 0 5px; background: url("/template/nav-bg.gif"); list-style: none; } ul#nav li { position: relative; float: left; height: 55px; margin-top: 10px; } ul#nav li a.topMenu, ul#nav li a.topMenu.current { display: block; height: 55px; background: url("/template/nav.gif") no-repeat; text-indent: -9999px; } ul#nav li#nav-about a.topMenu:link, ul#nav li#nav-about a.topMenu:visited { width: 122px; margin-left: 5px; background-position: 0 0; } ul#nav li#nav-about a.topMenu.current, ul#nav li#nav-about a.topMenu.current:link, ul#nav li#nav-about a.topMenu.current:visited, ul#nav li#nav-about a.topMenu:hover { width: 122px; background-position: 0 -55px; } ul#nav li#nav-nccp a.topMenu:link, ul#nav li#nav-nccp a.topMenu:visited { width: 81px; background-position: -122px 0; } ul#nav li#nav-nccp a.topMenu.current, ul#nav li#nav-nccp a.topMenu.current:link, ul#nav li#nav-nccp a.topMenu.current:visited, ul#nav li#nav-nccp a.topMenu:hover { width: 81px; background-position: -122px -55px; } ul#nav li#nav-membership a.topMenu:link, ul#nav li#nav-membership a.topMenu:visited { width: 134px; background-position: -203px 0; } ul#nav li#nav-membership a.topMenu.current, ul#nav li#nav-membership a.topMenu.current:link, ul#nav li#nav-membership a.topMenu.current:visited, ul#nav li#nav-membership a.topMenu:hover { width: 134px; background-position: -203px -55px; } ul#nav li#nav-resources a.topMenu:link, ul#nav li#nav-resources a.topMenu:visited { width: 118px; background-position: -337px 0; } ul#nav li#nav-resources a.topMenu.current, ul#nav li#nav-resources a.topMenu.current:link, ul#nav li#nav-resources a.topMenu.current:visited, ul#nav li#nav-resources a.topMenu:hover { width: 118px; background-position: -337px -55px; } ul#nav li#nav-news a.topMenu:link, ul#nav li#nav-news a.topMenu:visited { width: 153px; background-position: -455px 0; } ul#nav li#nav-news a.topMenu.current, ul#nav li#nav-news a.topMenu.current:link, ul#nav li#nav-news a.topMenu.current:visited, ul#nav li#nav-news a.topMenu:hover { background-position: -455px -55px; } ul#nav li#nav-funding a.topMenu:link, ul#nav li#nav-funding a.topMenu:visited { width: 180px; background-position: -608px 0; } ul#nav li#nav-funding a.topMenu.current, ul#nav li#nav-funding a.topMenu.current:link, ul#nav li#nav-funding a.topMenu.current:visited, ul#nav li#nav-funding a.topMenu:hover { background-position: -608px -55px; } ul#nav li#nav-careers a.topMenu:link, ul#nav li#nav-careers a.topMenu:visited { width: 112px; background-position: -788px 0; } ul#nav li#nav-careers a.topMenu.current, ul#nav li#nav-careers a.topMenu.current:link, ul#nav li#nav-careers a.topMenu.current:visited, ul#nav li#nav-careers a.topMenu:hover { background-position: -788px -55px; } ul#nav li ul.subnav { clear: both; z-index: 999; top: 54px; left: 0; display: none; position: absolute; width: 242px; margin: 0 0 0 1px; border: solid 1px #074e8b; font-size: 11px; list-style: none; } ul#nav li:hover ul.subnav { display: block; } ul#nav li ul.subnav li { float: none; height: auto; margin: 0; } ul#nav li ul.subnav li a { width: 210px; } ul#nav li ul.subnav li ul.subsubnav { /* display: none; position: absolute; margin-left: 242px; margin-top: -30px; */ } ul#nav li ul.subnav li:hover ul.subsubnav { display: block; } ul.subnav { zoom: 1; border: solid 1px #074e8b; font-size: 12px; list-style: none; } ul.subnav li { zoom: 1; float: none; height: auto; margin: 0; list-style: none; } ul.subnav li a:link, ul.subnav li a:visited { display: block; padding: 5px 16px; border-top: solid 1px #498bc2; border-bottom: solid 1px #246dab; background: #2776b9; color: #fff; text-decoration: none; } ul.subnav li a:hover { border-bottom: solid 1px #074e8b; background: #0a589a; color: #97c7ee; } ul.subnav li.current a:link, ul.subnav li.current a:visited, ul.subnav li.current a:hover { border-bottom: solid 1px #074e8b; background: #0a589a; color: #fff; font-weight: bold; } ul.subsubnav { zoom: 1; margin: 0; border-top: solid 1px #498bc2; border-bottom: solid 1px #246dab; font-size: 11px; list-style: none; } ul.subsubnav li { zoom: 1; float: none; height: auto; margin: 0; list-style: none; font-weight: normal; } ul.subnav li ul.subsubnav li a:link, ul.subnav li ul.subsubnav li a:visited { border: none; background: #498bc2; color: #97c7ee; font-weight: normal; } ul.subnav li ul.subsubnav li a:hover { border: none; } ul.subnav li ul.subsubnav li a.current, ul.subnav li ul.subsubnav li a.ssncurrent { border: none; background: #498bc2; color: #fff; font-weight: bold; } ul.subnav li ul.subsubnav li a:hover { border: none; background: #498bc2; color: #fff; } ul#nav li#nav-about ul { margin: 0 0 0 5px; } /* Typography --------------------------------------------*/ p { margin: 0 0 10px; } p.meta { margin: 0; color: #666; font-size: 11px; } div#copyright p { margin: 0; font-size: 11px; text-align: center; } ul { margin: 0 0 10px 30px; } ol { margin: 0 0 10px 30px; } ul ul, ul ol, ol ul, ol ol { margin: 0 0 0 30px; } h1.titleBar, h1.titlebar { margin: 0 -15px 10px -15px; padding: 5px 5px 5px 15px; background: url("/template/title-bg.gif"); color: #fff; font-size: 20px; font-weight: normal; text-align: right; } h1.calTitleBar { margin: 0 -15px 10px -15px; padding: 5px 5px 5px 15px; background: url("/template/calTitle-bg.gif"); color: #fff; font-size: 20px; font-weight: normal; text-align: right; } h2 { color: #000; margin: 20px 0 20px; font-size: 16px; } h3 { margin: 0; color: #222; font-size: 14px; } h4 { margin: 0; color: #222; font-size: 12px; } table { width: 100%; } hr { height: 1px; margin: 0 0 10px; border: none; background: #f2a900; } p strong { color: #222; } div#subNav p strong { color: #fff; } h2.breadcrumb { color: #ccc; font-size: 14px; } h2.breadcrumb strong { color: #000; } h2.breadcrumb span { color: #999; } /* Links --------------------------------------------*/ a { outline: none; } a img { border: none; } img { border: none; } a:link, a:visited { color: #2173b7; text-decoration: none; } a:hover { color: #045499; text-decoration: underline; } a:hover img { text-decoration: none; } div#subNav a:link, div#subNav a:visited { color: #fff; text-decoration: none; } div#subNav a:hover { color: #fff; text-decoration: underline; } /* Forms --------------------------------------------*/ input, textarea { font: 12px/18px arial, helvetica, sans-serif; } input.textField { padding: 3px 3px 3px 3px; border: solid 1px #ccc; } div#subNav input.textField { padding: 4px 6px 4px; border: solid 1px #0a589a; background: #3781be; color: #fff; } div#subNav input.textField:focus { border: solid 1px #86bad4; } div#subNav input { font-size: 12px; } fieldset { padding: 0 0 10px; margin: 0 0 20px; border: none; border-bottom: solid 1px #999; } legend { display: block; margin: 0 0 10px; color: #2173b7; font-size: 14px; font-weight: bold; } td.label label { display: block; padding: 2px 10px 2px 0; color: #666; } textarea.textareaField { width: 350px; height: 150px; padding: 3px; border: solid 1px #ccc; } td.label label.lRequired { color: #222; font-weight: bold; background: url('/images/required.gif') no-repeat 0 50%; } input.textField.fRequired { border: solid 1px #666; } input.textField.tfTiny { width: 30px; } input.textField.tfShort { width: 75px; } input.textField.tfNormal { width: 125px; } input.textField.tfLong { width: 250px; } /* Tables --------------------------------------------*/ table { margin: 0 0 10px; border-collapse: collapse; } table.withBorder { border: solid 1px #666; } table.withBorder td { padding: 5px; border: solid 1px #666; } table.withBorder th { padding: 5px; border: solid 1px #666; background: #ccc; text-align: center; } table p { margin: 0; } table.registerForm { margin: 0; } table.registerForm td { padding: 0 0 10px; vertical-align: top; } table.registerForm td.label { width: 170px; text-align: right; } table.registerForm td.radio { padding-top: 4px; } table.registerForm td.sep { padding: 0 0 10px; border-top: solid 1px #ddd; font-size: 0; line-height: 0; } table.registerForm td.textareaLabel { width: 230px; padding: 0 10px 10px 0; text-align: left; } table.registerForm td.textareaLabel h3 { font-size: 13px; } table.registerForm td.textareaLabel p { font-size: 11px; line-height: 15px; } table.courseList { border: solid 1px #666; } table.courseList th { padding: 5px; border-bottom: solid 1px #666; background: #666; color: #fff; } table.courseList td { padding: 5px; border-bottom: solid 1px #666; } table.courseList tr.highlight td { background: #def; color: #000; font-weight: bold; } input.error, select.error, textarea.error, input.textField.error, input.textField.fRequired.error { background: #fcc; color: #c00; border: solid 1px #c00; } td.label label.error, label.error { color: #c00; background: url('/images/required.gif') no-repeat -250px 50%; } /* Buttons --------------------------------------------*/ p.buttons { float: left; } p.buttons a, div#subNav p.buttons a, p.buttons button { display: block; float: left; margin: 0 5px 0 0; padding: 4px 7px 4px; border: none; background: #69a2d3 url("/template/button-bg.gif") repeat-x left bottom; color: #fff; font-family: arial, helvetica, sans-serif; line-height: 16px; text-decoration: none; cursor: pointer; } p.buttons a { padding: 4px 7px 4px; line-height: 16px; } p.buttons button:hover, p.buttons a:hover, div#subNav p.buttons a:hover { background: #0a589a; color: #97c7ee; } div#subNav button { font-size: 11px; } *:first-child+html button[type]{ padding:3px 7px 2px 7px; /* IE7 */ } /* Miscellany --------------------------------------------*/ div.clear { clear: both; } div.error { padding: 10px; margin-bottom: 20px; background: #fcc; color: #900; } div.error h2 { margin: 0; padding: 0; font-size: 13px; color: #900; } div.error p { margin: 0; padding: 0; } div.success { padding: 10px; margin-bottom: 20px; background: #9f9; color: #090; } div.success h2 { margin: 0; padding: 0; font-size: 13px; color: #090; } div.success p { margin: 0; padding: 0; } table#calendar { padding: 10px; border: none; min-height: 500px; width: 100%; border-collapse: collapse; padding: 0; margin: 0; font-size: 11px; line-height: 18px; } table#calendar th { padding: 3px 5px; border: solid 1px #ccc; background: #fff; font-size: 11px; text-align: center; color: #666; font-weight: normal; } table#calendar td { padding: 3px 5px; border: solid 1px #ccc; background: #fff; color: #69c; vertical-align: top; height: 65px; width: 14%; text-align: right; } table#calendar td.empty { background: #f3f3f3; } table#calendar caption { padding: 2px 0 5px; margin-top: 10px; font-size: 13px; font-weight: bold; } table#calendar td.calendar-event { padding: 0; } table#calendar td.event { padding: 3px 5px; background: #fdd; } table#calendar td.currentDay { background: #ddd; color: #000; } a.event:link, a.event:visited { display: block; color: #fff; padding: 5px; margin-top: 5px; font-size: 9px; line-height: 12px; } a.event:hover { text-decoration: none; } a.eCat-1:link, a.eCat-1:visited { background: #507d3e; } a.eCat-1:hover { background: #6a9658; } a.eCat-2:link, a.eCat-2:visited { background: #ba452e; } a.eCat-2:hover { background: #d35c45; } a.eCat-3:link, a.eCat-3:visited { background: #196cb3; } a.eCat-3:hover { background: #3781be; } a.eCat-4:link, a.eCat-4:visited { background: #eb9501; } a.eCat-4:hover { background: #efaa34; } a.eCat-5:link, a.eCat-5:visited { background: #4419b3; } a.eCat-5:hover { background: #c247b0; } a.eCat-6:link, a.eCat-6:visited { background: #19b38e; } a.eCat-6:hover { background: #47c2a5; } a.eCat-7:link, a.eCat-7:visited { background: #b3199c; } a.eCat-7:hover { background: #6947c2; } div.photo { float: left; margin: 10px 10px 0 0; } ul#eventCats { margin: 5px 0 0 0; padding: 10px 10px 0; list-style: none; border: solid 1px #ccc; } ul#eventCats li { margin: 0 0 10px; padding: 5px 10px; color: #fff; font-size: 11px; text-align: right; } li.eCat-1 { background: #507d3e; } li.eCat-2 { background: #ba452e; } li.eCat-3 { background: #196cb3; } li.eCat-4 { background: #eb9501; } li.eCat-5 { background: #4419b3; } li.eCat-6 { background: #19b38e; } li.eCat-7 { background: #b3199c; } table.centredCells td, table.centredCells th { text-align: center; padding-bottom: 10px; } a.eStart { margin-right: -6px; } a.eMiddle { margin-left: -6px; margin-right: -6px; } a.eEnd { margin-left: -6px; } label.infield { display: block; position: absolute; top: 0; left: 0; margin: 3px 10px 0; color: #fff; }